Встроенные блоки и перенос текста с помощью CSS

Question

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

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

Я хочу, чтобы это отображалось как:

X   Long Text
    Description
    Here

В настоящее время он выглядит так

X   Long Text
Description Here

Это легко сделать с таблицами, но мне нужно, чтобы он был в CSS по другим причинам. Я думал, что комбинация отображения: inline-block / float: right / clear / spans вместо DIVs подойдет, но пока мне не повезло

Answer 1

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

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

Answer 2

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

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

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