Встроенные блоки и обтекание текстом с помощью 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 по другим причинам. Я думал, что комбинация дисплея: inline-block/float: right/clear/spans вместо DIVs будет работать, но до сих пор мне не повезло.

Ответ 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;
     }

Ответ 2

Попробуйте следующее:

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

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