html - 使用 CSS 的内联块和文本换行

Question

我想显示一个复选框，然后是一些环绕在自身下方的文本。没有任何 CSS 的 HTML 如下所示：

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

我希望它显示类似于：

X   Long Text
    Description
    Here

它目前像这样环绕

X   Long Text
Description Here

这对表格很容易做到，但出于其他原因，我需要它在 CSS 中。我认为 display: inline-block / float: right / clear / spans 而不是 DIV 的组合会起作用，但到目前为止我还没有运气。

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基本上将其从块布局中取出，因此它不会下推文本。