防止文本在复选框下换行

Question

I'm laying out a set of checkboxes and I am running across the age-old issue of text wrapping underneath a checkbox if the text is too long.

My HTML:

<div class="right">
    <form id="updateProfile">
        <fieldset class="checkboxes">
            <p>4. What is your favorite type of vacation?</p>
            <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label>
            <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label>
            <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label>
            <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label>
            <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label>
            <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label>
            <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label>
            <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label>
            <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label>
            <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label>
            <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label>
        </fieldset>
    </form>
</div>

My CSS:

div.right{width:580px;}

form#updateProfile fieldset label{
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    float: left;
    width: 33%;
}

See my fiddle here: http://jsfiddle.net/fmpeyton/7WmGr/

After much searching on different sites, I can't seem to find a reasonable solution. I am open for suggestions on changing my markup/styles, but I would like to keep the code as clean and semantic as possible.

Thanks!

Answer 1

This seems to work:

http://jsfiddle.net/7WmGr/5/

I gave the label a margin-left of 18px and the checkboxes a margin-left of -18px.

Seems to work in Chrome & IE9.

 div.right { width: 598px; } form#updateProfile fieldset label { display: block; margin-bottom: 5px; font-size: 16px; float: left; width: 30%; margin-left: 18px; } form#updateProfile fieldset label input[type='checkbox'] { margin-left: -18px; }

 <div class="right"> <form id="updateProfile"> <fieldset class="checkboxes"> <p>4. What is your favorite type of vacation?</p> <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label> <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label> <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label> <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label> <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label> <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label> <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label> <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label> <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label> <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label> <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label> </fieldset> </form> </div>

Answer 2

I like this ...

HTML:

<input type="checkbox" name="vacation" value="Ski Trips"><label>very long label ...</label>

CSS:

input[type="checkbox"] { 
    position: absolute;
}
input[type="checkbox"] ~ label { 
    padding-left:1.4em;
    display:inline-block;
}

Answer 3

One option would be something like this.

form#updateProfile fieldset label{
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    float: left;
    width: 30%;
    padding-left: 3%;
    position: relative;
}

input {
    position: absolute;
    left: -5px;
}

Demo here: http://jsbin.com/opoqon/1/edit

The way I tend to do it is different, which is not wrapping inputs with labels , rather doing something like

<input id="ski-trips" type="checkbox" name="vacation" value="Ski Trips"><label for="ski-trips">Ski Trips</label>

which then allows for easier styling.

Here is an example of that way: http://jsbin.com/otezut/1/edit

But either way would work.

Answer 4

Here's one that's less reliant on the size of the input elements.

 div {width: 12em;} label { display: block; white-space: nowrap; margin: 10px; } label input { vertical-align: middle; } label span { display: inline-block; white-space: normal; vertical-align: top; position: relative; top: 2px; }

 <div> <label><input type="radio"><span>I won't wrap</span></label> <label><input type="checkbox"><span>I won't wrap</span></label> <label><input type="radio"><span>I am a long label which will wrap</span></label> <label><input type="checkbox"><span>I am a long label, I will wrap beside the input</span></label> </div>

Answer 5

The simplest option

HTML:

<form id="updateProfile">
    <fieldset class="checkboxes">
        <p>4. What is your favorite type of vacation?</p>
        <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label>
        <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label>
        <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label>
        <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label>
        <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label>
        <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label>
        <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label>
        <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label>
        <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label>
        <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label>
        <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label>
    </fieldset>
</form>

CSS:

label {
    display:flex;
    align-items: baseline;
}

input[type=checkbox] {
    margin-right: 8px;
}

Answer 6

I'd tried all the options and the best solution for was:

<div>
  <label><input type="checkbox"><span>Text</span></label>
  <label><input type="checkbox"><span>Text</span></label>
</div>

HTML like Pudica and Fillip suggested.

And the CSS you only set the float:left to the checkboxes and to prevent the text wrap around the checkbox you can simply use overflow:hidden on the span .

[type="checkbox] {
   float: left;
}
span {
   overflow: hidden;
}

You can use margin-left to give desired space from text to checkbox.

Answer 7

This is another option. It's very simple yet effective. You take the part that's wrapping. <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational <span class="antiWrap">trips</span></label> and you add a span with a class. I called the class antiWrap. Then you use css to add a left margin to it like. .antiWrap { margin-left: 18px; } .antiWrap { margin-left: 18px; } Here's myfiddle based using your code. http://jsfiddle.net/alexhram/7WmGr/3/ I think that's what your going for? Let me know.

Answer 8

The easiest solution is to use a table for layout in this case. Rather than fiddling with a thousand different possible permutations of css because supposedly tables are evil, this just works 100% of the time.

<table>
  <tr>
    <td><input type=checkbox id=blah><label ='blah'></label></td>
    <td><label for='blah'>Long label here...</td>
   </tr>
</table>

And if you need a label next to your checkbox for styling purposes then just use an empty label tag there and use the real label in the second table cell. (Yes, you can use multiple labels for the same checkbox)