не допускать переноса флажка на противоположную сторону страницы - PullRequest
Новая
       13

не допускать переноса флажка на противоположную сторону страницы

4 голосов
/ 26 апреля 2011

Как вы можете видеть на изображении ниже, тогда, когда размер окна браузера изменяется, ярлыки флажков могут переноситься на противоположную сторону их связанных флажков.
enter image description here
На изображении выше метка для флажка 12 завернута и находится на противоположной стороне экрана. Как сделать так, чтобы каждый ярлык оставался со своим флажком?

Ответы [ 2 ]

9 голосов
/ 26 апреля 2011

Поставьте флажки в метках меток и присвойте метку display: inline-block.Тексты могут быть любого размера, «встроенный блок» объединяет текст и флажок.

Демонстрация (измените размер вашего браузера, чтобы 14 переместилось на следующую строку): http://jsfiddle.net/csYPu/

HTML: 

<label><input type="checkbox">1</label>
<label><input type="checkbox">2</label>
<label><input type="checkbox">3</label>

CSS: 

label {
    display: inline-block;
}
1 голос
/ 26 апреля 2011

Я бы сгруппировал метку и флажок в элемент (li, div) и сместил их влево.

Пример:

css 

ul {
  overflow: hidden;
}
li {
  float: left;
}

html 

<ul>
  <li><input type="checkbox" name="box1" id="box1" value="1"><label for="box1">1</label></li>
  ...
  <li><input type="checkbox" name="box13" id="box13" value="1"><label for="box13">13</label></li>
</ul>
...