CODEWITHSUNDEEP
css
methuselah
methuselah

Reputation: 13206

Difficulty aligning checkboxes in CSS

I'm having difficulty lining up my checkboxes (under Weeks) with the other sections of my form (namely 2. Date & Time). In addition to this, I can't seem to get text to the right of the checkbox, it always seeems to appear underneath. How can I resolve this?

Here is my fiddle: http://jsfiddle.net/4YMaQ/2/

Code

label {
    width: 8em;
    float: left;
    text-align: left;
    display: block;
}
select {
    width: 70%;
}
.slider, .slider2 {
    width: 100%;
    margin-top: 5px;
}
input {
    border: none;
    font-family: 'Segoe UI', arial, helvetica, sans-serif !important;
    font-size: 14px;
    padding: 0px;
    background-color: transparent;
}
.clear {
    clear: both;
}
.w50 {
    width: 50%;
}
.weeks fieldset {
    border: none;
    outline: none;
}
.weeks fieldset > legend {
    float: left;
    margin-right: 3.8em;
}
.weeks fieldset .item {
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.weeks fieldset label {
    float: none;
    display: inline-block;
    vertical-align: top;
}
.left {
    float: left;
    outline: none;
}
fieldset span {
    display: inline-block;
    width: 12em;
}
.weeks fieldset span {
    display: inline-block;
    width: 2em;
}
.request_heading {
    font-size: 18px;
    font-weight: bold;
}
.page {
    padding-left: 20px;
    font-family: 'Segoe UI', arial, helvetica, sans-serif;
    padding-right: 20px;
    font-size: 14px;
}

Upvotes: 1

Views: 91

Answers (6)

FLClover
FLClover

Reputation: 534

Changing the display of your .item-Elements to inline-block should do the trick.

.weeks fieldset .item {
    display: inline-block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Just Use display: inline-block; to your item class It works. Demo

Upvotes: 1

Maen
Maen

Reputation: 10698

I changed the structure of your HTML to match your needs, I removed all the labels after the inputs.

Here's the fiddle, let me know if it's good enough for you.

Upvotes: 1

Nick Audenaerde
Nick Audenaerde

Reputation: 1025

Adjust the width of the .weeks fieldset, you force the checkboxes to go under weeks :)

.weeks fieldset {
border: none;
outline: none;
width: 50px;
}

It did not work anymore because other things changed, this is what you have to do:

.weeks fieldset .item {
margin: 0;
padding: 0;
width: 40px;
}

Remove overflow hidden and add a width to this field.

.weeks fieldset {
border: none;
outline: none;
width: 124px;

}

The width i provided might not be the width you want, adjust to your own needs :)

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32162

Now just define your class .weeks fieldset span text-align:center; and

Define your .weeks fieldset label with:auto;

as like this 

.weeks fieldset span{
    text-align:center;    
}
.weeks fieldset label{
    width:auto;
}

Demo

Upvotes: 1

Pete
Pete

Reputation: 58412

Your spans are 2em (you seem to have overwritten your 12em on the line below) where as your labels are 8em which is why they are wrapping onto the next line if you change your

if you change your spans to 3.5em and your labels to 1.5em you will get the following:

 .weeks fieldset label {width:1.5em}
 .weeks fieldset span {width:3em;}

http://jsfiddle.net/4YMaQ/6/

if you change your right margin on your legend you can fit five on a line:

 .weeks fieldset > legend {margin-right:1.1em;}

Upvotes: 1

Related Questions