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

38

Как сделать так, чтобы флажок и следующий текст отображались в одной строке? В следующем 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>

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

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

Я хочу:

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

Ваш Ответ

5   ответов
30

если вы оберните каждый элемент в 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/

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

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

label {
  display: inline-block;
}
это работает, если вы добавляете ввод внутри метки.
IE7 не поддерживает встроенный блок
оберните каждую пару флажков и меток в div, который устанавливается с помощью display: inline-block
@ Брент: Я бы проголосовал, если бы твой ответ отражал твой комментарий. Как таковой, ответ, в отдельности, неверен; но если кто-то делает, как вы предлагаете в своем комментарии, это работает.
Разрыв строки может все еще появляться между флажком и меткой. Я отредактирую свой вопрос, чтобы уточнить. Andreas
0

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

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

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

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

Спасибо за это!!
17

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

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

Похожие вопросы