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 / span来替代DIV，但目前还没有成功。

- geographika

Answer 1

将复选框和标签包装在一个容器div（或li-我经常使用列表制作表单）中，并应用

将复选框和标签放在一个容器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;
     }

- easwee

---

HTML是类似项目列表的一部分，因此这种方法效果很好。我为每个列表项添加了clear:left;，否则项目会开始错开，但我没有使用display:block。 - geographika

你能提供一个这个工作的例子吗？就我所看到的，它没有达到预期的结果（我看到长行被推到了复选框下面）：http://jsfiddle.net/h8uKN/ - Chris

+1 给 Chris，抱歉，但是提供的解决方案在 Chrome 中不起作用，因此并不是一个可靠的解决方案。 - reaper_unique

以下提供了一个使用margin-left解决相同问题的解决方案：https://dev59.com/827Xa4cB1Zd3GeqPr5wV。简而言之，最简单的解决方案是给标签一个margin-left（如果框在右边，则为margin-right），并将其min-width设置为复选框的宽度。 - reaper_unique

Answer 2

试试这个：

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

调整 margin-left ，以设置您想要的间距。在复选框上使用的 float:left 基本上将其从块布局中移出，因此它不会推动下文本。

- cletus

---

感谢您对浮点数实际作用的简明描述。这种方法也是可行的。 - geographika