html - 对齐表单域的浮动部分

Question

我有一个包含在结构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;
}

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

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

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

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

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

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

Answer 1

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

Answer 2

将 移动description到 中label，您可以从中删除clear:both和float:left属性 - 描述现在是左侧浮动标签的一部分，因此它应该可以工作。使Description display: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>

最终标签未呈现时存在一些问题。

Answer 3

我最终只是摆脱了浮动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/