Html 对齐表单字段的浮动部分

我有一个包含在

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>

注意：带有类

说明
的
div
可以不存在、内部不包含文本或包含文本

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

下面是一张显示当前情况的图片：

我一直在尝试各种各样的浮动和定位，但似乎无法达到目标。有人能就如何实现预期结果提出建议吗

我正在寻找一个CSS唯一的解决方案，最好没有javascript请：）

Fiddle:
将
说明
移动到
标签
中，您可以从中删除
清除：同时删除
和
浮动：左
属性-说明现在是左浮动标签的一部分，因此应该可以使用。使
说明
显示：块

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


迈拉贝尔先生{
浮动：左；
宽度：80px；
右边距：20px；
}
.说明{
宽度：80px；
右边距：20px；
显示：块；
}
保险商实验室{
浮动：左；
}


我的标签
一些描述


测试12


测试23




最后一个标记没有呈现时出现了一些问题。
我最终只是去掉了
ul
上的浮点数，并使其成为
内联块
：

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

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

ul{
    display: inline-block;
}

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

这就是为什么“上帝”发明了一种新技术。顺便说一句，您缺少一个
字段集
，您在CSS中引用了一个通用的
ul
。@web\u bod-表格在语义上不适合布局。从1921年开始。@EliranMalka:你能解释一下实现字段集的正确方法吗？如果您的意思是缺少
表单
标记，那是因为我删除了它们，因为这只是一个表单中的一个字段，还有一堆其他字段：）我指的是您对
字段集
的
图例
布局的期望。在第二个示例中，预期的布局是不可想象的。根据HTML5验证程序，图例不能包含div：（因此，用另一个元素替换div，并使其
diplay:block
legend{
    float: left;
    width: 80px;
    margin-right: 20px;
}

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

ul{
    display: inline-block;
}