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>

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

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

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;
}

CSS表单布局问题

4 个答案: