Как заставить флажок и текст на одной строке?

Как я могу заставить флажок и следующий текст появиться в одной строке? В следующем HTML я хотел бы, чтобы строка прерывалась между меткой и входом, а не между вводом и меткой.

<p><fieldset>
    <input type="checkbox" id="a">
    <label for="a">a</label>
    <input type="checkbox" id="b">
    <!-- depending on width, a linebreak can occur here. -->
    <label for="b">b</label>
    <input type="checkbox" id="c">
    <label for="c">c</label>
</fieldset></p>

Чтобы уточнить: если набор полей /p недостаточно широк для всех элементов, а не:

[] a [] b []
c [] d [] e

Я хочу:

[] a [] b
[] c [] d
[] e

Ответы

Ответ 1

Он не сломается, если вы обернете каждый элемент в div. Посмотрите мою скрипку со ссылкой ниже. Я сделал ширину fieldset 125px и сделал каждый предмет размером 50px. Вы увидите, что метка и флажок остаются рядом друг с другом на новой строке и не прерываются.

<fieldset>
<div class="item">
    <input type="checkbox" id="a">
    <label for="a">a</label>
</div>
<div class="item">
   <input type="checkbox" id="b">
<!-- depending on width, a linebreak can occur here. -->
    <label for="b">bgf bh fhg fdg hg dg gfh dfgh</label>
</div>
<div class="item">
    <input type="checkbox" id="c">
    <label for="c">c</label>
</div>
</fieldset>

http://jsfiddle.net/t5dwp7pg/1/

Ответ 2

Попробуйте этот CSS:

label {
  display: inline-block;
}

Ответ 3

Попробуйте это. В нижеследующем рассматривается флажок и метка как уникальный элемент:

<style>
  .item {white-space: nowrap;display:inline  }
</style>
<fieldset>
<div class="item">
    <input type="checkbox" id="a">
    <label for="a">aaaaaaaaaaaa aaaa a a a a a a aaaaaaaaaaaaa</label>
</div>
<div class="item">
   <input type="checkbox" id="b">
<!-- depending on width, a linebreak NEVER occurs here. -->
    <label for="b">bbbbbbbbbbbb bbbbbbbbbbbbbbbbb  b b b b  bb</label>
</div>
<div class="item">
    <input type="checkbox" id="c">
    <label for="c">ccccc c c c c ccccccccccccccc  cccc</label>
</div>
</fieldset>

Ответ 4

Другой способ сделать это исключительно с помощью css:

input[type='checkbox'] {
  float: left;
  width: 20px;
}
input[type='checkbox'] + label {
  display: block;
  width: 30px;
}

Обратите внимание, что это заставляет каждый флажок и его метку на отдельной строке, а не только делать это только при переполнении.

Ответ 5

http://jsbin.com/etozop/2/edit

put a div wrapper with WIDTH :

  <p><fieldset style="width:60px;">
   <div style="border:solid 1px red;width:80px;">
    <input type="checkbox" id="a">
    <label for="a">a</label>
    <input type="checkbox" id="b">

    <label for="b">b</label>
   </div>

    <input type="checkbox" id="c">
    <label for="c">c</label>
</fieldset></p>

имя может быть "john winston ono lennon", которое очень длинное... так что вы хотите сделать? (вы никогда не знаете длину)... вы можете сделать функцию, которая обертывается после х символов, таких как: "john winston o...."