it-swarm.com.ru

Запретить перенос текста под флажком

Я выкладываю набор флажков и сталкиваюсь с давней проблемой переноса текста под флажком, если текст слишком длинный. 

Мой 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>

Мой CSS:

div.right{width:580px;}

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

Смотрите мою скрипку здесь: http://jsfiddle.net/fmpeyton/7WmGr/

После долгих поисков на разных сайтах я не могу найти разумного решения. Я открыт для предложений по изменению моей разметки/стилей, но я хотел бы сохранить код как можно более чистым и семантическим.

Спасибо!

18
Fillip Peyton

Это похоже на работу:

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

Я дал labelmargin-left из 18px, а флажки margin-left из -18px.

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>

CSS:

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;}

Кажется, работает в Crome и IE9.

28
Fillip Peyton

Одним из вариантов будет что-то вроде этого.

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;
}

Демо здесь: http://jsbin.com/opoqon/1/edit

То, как я это делаю, отличается от того, что не заключает inputs в labels, а делает что-то вроде 

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

который тогда учитывает более легкое моделирование. 

Вот пример такого способа: http://jsbin.com/otezut/1/edit

Но в любом случае будет работать.

3
gotohales

Мне это нравится ...

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;
}
2
Christian Michael

Это еще один вариант. Это очень просто, но эффективно. Вы принимаете участие, которое оборачивает. <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational <span class="antiWrap">trips</span></label> и вы добавляете span с классом. Я позвонил в класс antiWrap. Затем вы используете CSS, чтобы добавить левое поле к нему, как. .antiWrap { margin-left: 18px; } Вот мой myfiddle на основе вашего кода. http://jsfiddle.net/alexhram/7WmGr/3/ Я думаю, это то, что вы собираетесь? Дай мне знать.

0
Chakotay

Вот тот, который меньше зависит от размера элементов ввода.

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>

0
Pudica