Html CSS表单布局问题

我的表格上有以下内容：

<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...

最短/最简单的html/css是什么

---

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

我很惊讶实现这一点的唯一方法是将所有复选框包装到一个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。如果“浮动”是指“绝对定位”，请告诉我，我将删除答案

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

ul.集装箱
{
列表样式类型：无；
显示：块；
位置：相对位置；
宽度：400px；
}
李.标签
{
显示：块；
位置：绝对位置；
宽度：150px；
左：0px；
顶部：0px；
}
李：复选框
{
显示：块；
位置：绝对位置；
宽度：250px；
左：150px；
顶部：0px；
}


节目类型兴趣


测试测试

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

这样如何：

*{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的

上已经设置的任何边距和填充。我一直使用有序列表元素标记每个表单元素，并将其扩展到布尔列表，例如您的。它提供了将每个标签/布尔输入分组的优势，同时只向混合中添加语义标记-实际上，没有样式表的用户可以通过这种方式标记表单，从而受益匪浅

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

按日期筛选

你们的例子不一致。是不是“节目类型兴趣：”变成了“标签文本”，而“[]体育”变成了“cb1”？嗯，是的。我只是想在第二组示例中展示布局。内容是不相关的。对，但是有很多标签。你看到歧义了吗？呃，我想很明显，复选框周围的标签文本会出现在复选框旁边。对不起，如果你不清楚我的意图。
*{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;}

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