内联块和CSS文本包装

时间:2010-02-11 09:06:27

标签: html css css-tables

我想显示一个复选框,然后是一些包含在自身下方的文本。没有任何CSS的HTML如下所示:

<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 / span而不是DIV会起作用,但到目前为止我没有运气。

2 个答案:

答案 0 :(得分:7)

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

答案 1 :(得分:5)

试试这个:

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

margin-left调整到你想要的空间。复选框上的float: left基本上将其从块布局中取出,因此不会向下推文本。