У меня есть следующий код
<li>
<label> Label: </label>
<p>I am label 1 </p>
</li>
Это печатает как
1. Label:
I am label 1
как мне это изменить, так как он печатает
Label: I am label 1
<p>
- это элемент уровня блока, поэтому вам нужно разрешить ему поток, используя display:inline
или inline-block
(или float
если необходимо):
li p {display:inline-block;}
<li>
<label> Label: </label>
<span>I am label 1 </span>
</li>
Используйте span вместо p, если вы хотите, чтобы он отображался в одной строке. p - элемент уровня блока
Ярлыки имеют смысл только при корреляции с элементами <input>
. Когда пользователь нажимает на элемент <label>
, <input>
указывает на получение фокуса и выбор. Флажки загружены и т.д.
<li>
<label for="quantity">Quantity</label>
<input id="quantity" type="number"
min="0" placeholder="Quantity (0 to delete)">
<li>
Метка указывает на ввод. С помощью CSS вы можете 100px
form label
шириной 100px
и 100px
ее влево. Вы можете определить form li
чтобы очистить ее. form ol
должна иметь list-style-type: none
. Здесь нет необходимости <p>
. Работа с системой; не бойся.
Если вы просто используете простой текст, используйте обычный текст, а не ярлыки. С другой стороны, вы можете создать стиль списка определений, как в старом <dl compact>
. Я не уверен, как вы получите <dt>
и <dd>
в одной строке.
<li class="myli">
<label class="mylabel"> Label: </label>
<p class="inline-p">I am label 1 </p>
</li>
CSS
.mylabel {display:inline-block;}
.inline-p {display:inline-block;}
li.myli {list-style-type:none;}
должно сработать
li label, li p {
float: left;
}
Я полагаю, что вы начинаете с <ul>
или <ol>
чем можете сделать так:
ul li p {
display: inline;
}
или
ol li p {
display: inline;
}