对齐表单域的浮动部分答案

【问题标题】：Aligning floating parts of a form field对齐表单域的浮动部分
【发布时间】：2012-05-27 04:16:29
【问题描述】：

我有一个包含在ul 和li 结构中的表单字段列表。我已经简化了我的标记以专注于我遇到的问题。

这是标记：

<ul>
<li class="multiplechoice">
   <fieldset>
     <legend>my label</legend>
     <div class="description">My description</div>

          <ul>        
            <li>
              <button value="asdf" readonly="readonly"></button>
              <label>test12</label>
             </li>
             <li>
               <button value="0" readonly="readonly"></button>
               <label for="test23">test23</label> </li>
           </ul>

    </fieldset>
</li>
</ul>

还有我目前拥有的 CSS：

legend{
    float: left;
    width: 80px;
    margin-right: 20px;
}

.description{
    clear: both;
    float: left;
    width: 80px;
    margin-right: 20px;
}

ul{
    float: left;
}

注意：类 description 的 div 可以不存在、内部不包含文本或包含文本。

我想做的是让图例和描述都浮动到左边。说明应位于图例下方。包含按钮的ul 应与那些浮动项之间有一个边距，与第一个浮动项的顶部对齐并垂直对齐。

这是一张显示事物当前状态的图片：

我一直在尝试各种浮动和定位，但似乎无法到达那里。任何人都可以就如何达到预期的结果提出建议吗？

我正在寻找仅 CSS 的解决方案，最好不要使用 javascript :)

小提琴：http://jsfiddle.net/eHEcJ/

【问题讨论】：

这就是“上帝”发明桌子的原因
看看this forked fiddle。顺便说一句，您错过了 fieldset 的意义，并且您错误地在 CSS 中引用了通用的 ul。
@web_bod - 表格在语义上不适合布局。自 1921 年以来。
@EliranMalka：你能解释一下实现字段集的正确方法是什么吗？如果您的意思是缺少 form 标签，那是因为我已经删除了它们，因为那只是表单中的一个字段，还有一堆其他字段:)
我指的是您对fieldset 的legend 布局的期望。在您的第二个插图中，预期的布局是不可思议的。

标签： html css positioning css-float

【解决方案1】：

将description 移动到label 中，您可以从中删除clear:both 和float:left 属性 - 描述现在是左侧浮动标签的一部分，因此应该可以使用。制作Descriptiondisplay:block

<style>
.myLabel{
    float: left;
    width: 80px;
    margin-right: 20px;
}

.description{
    width: 80px;
    margin-right: 20px;
    display:block;
}

ul{
    float: left;
}

</style>
<fieldset>
  <ul>
    <li class="multiplechoice">
          <label class="myLabel">my label
            <span class="description">some description</span>
          </label>
          <ul>
            <li>
              <button value="asdf" readonly="readonly"></button>
              <label>test12</label>
             </li>
             <li>
               <button value="0" readonly="readonly"></button>
               <label for="test23">test23</label> </li>
           </ul>
     </li>
</ul></fieldset>

在最终标签未呈现时遇到了一些问题。

【讨论】：

不幸的是，根据 HTML5 验证器，图例不能包含 div :(
所以，用另一个元素替换 div 并使其成为diplay:block

【解决方案2】：

我最终只是摆脱了 ul 上的浮动并将其设为 inline-block：

legend{
    float: left;
    width: 80px;
    margin-right: 20px;
}

.description{
    clear: both;
    float: left;
    width: 80px;
    margin-right: 20px;
}

ul{
    display: inline-block;
}

还有小提琴：http://jsfiddle.net/BU57V/

【讨论】：

【解决方案3】：

这里有一些有用的东西，如上所述，您并不总是需要一个表格来对齐字段。在我尝试为报告创建标题时通过反复试验发现；我是 HTML 的初学者，所以这可能不是最优雅的解决方案。

【讨论】：