Вопросы Теги

Встроенные блоки и перенос текста с CSS

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

<input type="checkbox" checked="checked" />
<div>Long text description here</div>

Я хочу, чтобы это отобразилось подобный:

X   Long Text
    Description
    Here

Это в настоящее время повторяется как это

X   Long Text
Description Here

Это легко сделать с таблицами, но мне нужен он, чтобы быть в CSS по другим причинам. Я думал комбинация дисплея: встроенный блок / плавание: право / ясный / промежутки вместо ОТДЕЛЕНИЙ работали бы, но у меня не было удачи до сих пор.

14
задан Brian Tompsett - 汤莱恩 22 May 2017 в 09:07
поделиться

2 ответа

Оберните флажок и метку в контейнер div (или часто используйте формы со списками) и примените 

<div class="checkbox">
  <input type="checkbox" id="agree" />
  <label for="agree">I agree with checkbox</label>
</div>




.checkbox input {
      float:left; 
      display:block;
      margin:3px 3px 0 0;
      padding:0;
      width:13px;
      height:13px;
     }

.checkbox label {
      float:left;
      display:block;
      width:auto;
     }
7
ответ дан 1 December 2019 в 14:43
поделиться

Заверните флажок и метку в контейнер div (или li - i часто заполняют формы со списками) и примените 

<div class="checkbox">
  <input type="checkbox" id="agree" />
  <label for="agree">I agree with checkbox</label>
</div>




.checkbox input {
      float:left; 
      display:block;
      margin:3px 3px 0 0;
      padding:0;
      width:13px;
      height:13px;
     }

.checkbox label {
      float:left;
      display:block;
      width:auto;
     }
-121--2650633-

Я не вижу способа сделать это как есть. Я думаю, что вам может понадобиться удалить overflow: hidden из div # 1 и добавить еще один div в div # 1 (т.е. в качестве родного брата для div # 2), чтобы сохранить ваше неопределенное «содержимое» и добавить overflow: hidden вместо этого. Я не думаю, что переполнение может быть (или должно быть) перегружено.

-121--2023039-

Попробуйте: 

input { float: left; }
div { margin-left: 40px; }

Настройте левое поле на необходимый объем пространства. Флажок float: left в основном вынимает его из макета блока, чтобы он не продавливал текст.

5
ответ дан 1 December 2019 в 14:43
поделиться