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应与这些浮动项目的边距分开，与第一个浮动的顶部对齐并垂直对齐。

这是一张显示当前状态的图片： enter image description here

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

我正在寻找一个仅限CSS的解决方案，最好不要使用javascript：）

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

Answer 1

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

Answer 3

如上所述，您可能不需要使用表来对齐字段。当我试图为报告创建标题时，通过反复试验找到;我是HTML的初学者，所以这可能不是最优雅的解决方案。

enter image description here

对齐表单域的浮动部分

3 个答案: