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

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

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

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

而我想要的是

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

实现此目的的最短/最简单的 html/css 是什么？

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

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