CSS表单布局问题

Question

我的表单上有以下元素：

<li>
    <label class="fixed" for="Interests">Program genre interests:</label>
    <label for="Sports"><%=Html.CheckBox("Sports")%>Sports</label>
    <label for="Comedy"><%=Html.CheckBox("Comedy")%>Comedy</label>
    <label for="News"><%=Html.CheckBox("News")%>News</label>
    <label for="Drama"><%=Html.CheckBox("Drama")%>Drama</label>
    <label for="Reality"><%=Html.CheckBox("Reality")%>Reality</label>
    <label for="Kids"><%=Html.CheckBox("Kids")%>Kids'</label>
</li>

“固定”类只是使标签成为具有固定宽度的内联块（以正确对齐字段）。如果复选框由于某种原因被强制换行，问题就会出现，因为第二行复选框从标签下方开始，而不是与第一行复选框左对齐。

我正在努力减少必要的标记/样式，但我不确定实现我正在寻找的对齐方式的最有效方法。我得到的是：

label text here:    cb1, cb2, cb3, cb4
cb5, cb6, cb7, etc...

而我想要的是

label text here:    cb1, cb2, cb3, cb4
                    cb5, cb6, cb7, etc...

实现这个的最短/最简单的html/css是什么？

编辑：我应该注意我试图避免使用浮动，因为页面的其余部分将包含一些浮动元素，并且我之前遇到过嵌套浮动的问题。

Answer 1

我害怕实现这一点的唯一方法是将所有复选框包装到一个 div 元素中：

<li>
    <label class="fixed" for="Interests">Program genre interests:</label>
    <div class="checkboxes-wrapper">
      <label for="Sports"><%=Html.CheckBox("Sports")%>Sports</label>
      <label for="Comedy"><%=Html.CheckBox("Comedy")%>Comedy</label>
      <label for="News"><%=Html.CheckBox("News")%>News</label>
      <label for="Drama"><%=Html.CheckBox("Drama")%>Drama</label>
      <label for="Reality"><%=Html.CheckBox("Reality")%>Reality</label>
      <label for="Kids"><%=Html.CheckBox("Kids")%>Kids'</label>
    </div>
</li>

并使用以下 CSS：

.fixed, .checkboxes-wrapper { float:left }
.checkboxes-wrapper { width: 200px; } /* 200px should be replaced by whatever size you want it to be */

Answer 2

你可以做这样的事情，假设“不使用浮点数”你的意思是“不使用浮点数：”css。如果“浮动”是指“绝对定位”，请告诉我，我会删除答案。

<style type="text/css">
    ul.Container
    {
        list-style-type:none;
        display:block;
        position:relative;
        width:400px;
    }

    li.Label
    {
        display:block;
        position:absolute;
        width:150px;
        left:0px;
        top:0px;
    }

    li.Checkboxes
    {
        display:block;
        position:absolute;
        width:250px;
        left:150px;
        top:0px;
    }
</style>
<ul class="Container">
    <li class="Label">
        program genre interests
    </li>
    <li class="Checkboxes">
        <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test 
    </li>
</ul>

虽然您必须将每个复选框和标签包装到一些内联标签中，否则您可能会在复选框和标签之间出现中断。

Answer 3

这个怎么样：

*{margin:0;padding:0}
li {text-indent:-170px;margin-left:340px;overflow:show;display:block;}
.fixed {display:inline-block;width:160px;}
label {display:inline-block;width:80px;}

在 Firefox 中为我工作。

您需要稍微调整一下这些值，以使其适用于您已经在 li 上设置的任何边距和填充

Answer 4

我一直使用有序列表元素来标记每个表单元素，并将其扩展为布尔列表，例如您的。它提供了对每个标签/布尔输入进行分组的优势，同时仅将语义标记添加到混合中 - 它实际上有利于没有样式表的用户以这种方式标记表单...

<li>
    <label for="...">Filter by date</label>
    <input id="..." name="..." tabindex="1" type="text" value="" /> 
</li>
<li
    <label for="...">Filter by status</label> 
    <ol>
        <li class="containsBoolean">
            <label for="...">Online</label>
            <input id="..." name="..." type="checkbox" value="" /> 
        </li>
        <li class="containsBoolean">
            <label for="...">Paused</label>
            <input id="..." name="..." type="checkbox" value="" /> 
        </li>
        <li class="containsBoolean">
            <label for="...">Disabled</label>
            <input id="..." name="..." type="checkbox" value="" /> 
        </li>
        <li class="containsBoolean">
            <label for="...">Deleted</label>
            <input id="..." name="..." type="checkbox" value="" /> 
        </li>
    </ol>
</li>
<li class="containsBoolean">
    <label for="...">Show Deleted</label>
    <input id="..." name="..." type="checkbox" value="" /> 
</li>
<li>
    <button type="submit">Filter</button>
</li>

然后很容易解决每个列表节点并为布尔输入样式使用公共类...

form fieldset ol li {
margin-bottom:24px;
position:relative;
}

form fieldset ol li.containsBoolean input[type=checkbox],
form fieldset ol li.containsBoolean input[type=radio] {
left:0;
position:absolute;
top:0;
}

form fieldset ol li.containsBoolean label {
line-height:24px;
margin-left:30px;
}