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

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

<code><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>
</code>

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

<code>[] a [] b []
c [] d [] e
</code>

Я хочу:

<code>[] a [] b
[] c [] d
[] e
</code>
 Royi Namir06 мая 2012 г., 10:45
почему ты не кладешь div между ними?
 Andreas06 мая 2012 г., 10:47
Я не знаю, можете ли вы уточнить, что вы имеете в виду?
 Andreas06 мая 2012 г., 10:51
Если бы я написал абзац, например,<p>Hi my name is Andreas</p>Я бы не вставлял разрывы строк туда вручную, а скорее ожидал бы, что браузер сделает это. Тем не менее, я бы не хотел, чтобы браузер вставлял перенос строки в серединеAndreasЭто то, что я пытаюсь здесь предотвратить. То есть я не знаю, сколько пар флажок-метка или где будут подходить разрывы строк.

Ответы на вопрос(5)

Решение Вопроса

если вы оберните каждый элемент в div. Проверьте мою скрипку по ссылке ниже. Я сделал ширину поля 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/

 20 мая 2016 г., 10:23
Попробуйте сделать ваш ярлык больше, чем одну букву! это не будет работать для длинных этикеток.

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

label {
  display: inline-block;
}
 05 авг. 2012 г., 20:26
IE7 не поддерживает встроенный блок
 30 июл. 2015 г., 15:53
это работает, если вы добавляете ввод внутри метки.
 06 мая 2012 г., 10:57
оберните каждую пару флажков и меток в div, который устанавливается с помощью display: inline-block
 Andreas06 мая 2012 г., 10:42
Разрыв строки может все еще появляться между флажком и меткой. Я отредактирую свой вопрос, чтобы уточнить.
 14 авг. 2014 г., 02:21
@ Брент: Я бы проголосовал, если бы твой ответ отражал твой комментарий. Как таковой, ответ, в отдельности, неверен; но если кто-то делает, как вы предлагаете в своем комментарии, это работает.

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


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

a name could be " john winston ono lennon" which is very long... so what do you want to do? (youll never know the length)... you could make a function that wraps after x chars like : "john winston o...."

 06 мая 2012 г., 10:58
@Andreas позволяет говорить экстремально, имя может быть & quot; Джон Уинстон Оно Леннон & quot; что очень долго ... так что вы хотите сделать? Вы можете создать функцию, которая переносится после символов x, например: & quot; Джон Уинстон o .... & quot;
 Andreas06 мая 2012 г., 10:56
Это предполагает, что я заранее знал размер p / fieldset и длину меток.
 Andreas06 мая 2012 г., 11:02
Одна пара флажок-метка всегда подойдет. Я решил это с помощью комментария Брента.

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

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

 11 июл. 2016 г., 21:11
Спасибо за это!!

Далее рассматривается флажок и метка как уникальный элемент:

<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>
 22 июн. 2018 г., 08:51
«пустое пространство: nowrap»; это трюк, который я искал. Благодарю.

Ваш ответ на вопрос