html - Float Left list with float right text boxes 设置在 UL 列表下方而不是设置相邻

Question

我只是想将一个无序列表向左浮动，将一组文本框向右浮动，以便它们彼此相邻并在 div 标记内具有统一的外观。问题是文本框在右边......但位于 ul 元素下方

.PersonLI
{
   float: left;
   clear: both;
   width: 100px;
   margin-bottom: 10px;
}
.PersonBox
{
   float: right;
   clear: both;
   width: 99px;
   margin-bottom: 10px;
}
.FirstObj
{
    border: 1px solid black;
    margin-left: 100px;
    width: 300px;
    height: 200px;
}    
<div class="FirstObj">
   <ul style="list-style: none;">
      <li class="PersonLI">First Name:</li>
      <li class="PersonLI">Last Name:</li>
      <li class="PersonLI">Address:</li>
      <li class="PersonLI">City:</li>
      <li class="PersonLI">State:</li>
      <li class="PersonLI">Zip Code:</li>
   </ul>
   <input id="txtFname" type="text" value="" class="PersonBox"/>
   <input id="txtLname" type="text" value="" class="PersonBox"/>
   <input id="txtAddr" type="text" value="" class="PersonBox"/>
   <input id="txtCity" type="text" value="" class="PersonBox"/>
   <input id="txtState" type="text" value="" class="PersonBox"/>
   <input id="txtZip" type="text" value="" class="PersonBox"/>
</div>

难道我不需要清除最后一个列表项上的 float 吗？

Answer 1

您的标记有点奇怪。适应您的样式的语义形式如下所示:

.FirstObj ul {
  list-style: none;
}

.FirstObj li {
  margin-bottom: 10px;
  clear: both;
}

.FirstObj label {
  width: 100px;
  float: left;
}

.FirstObj input {
  float: right;
  width: 99px
}

<div class="FirstObj">
   <ul>
      <li>
        <label for="txtFname">First Name:</label>
        <input id="txtFname" type="text" value="" />
      </li><li>
        <label for="txtLname">Last Name:</label>
        <input id="txtLname" type="text" value="" />
      </li><li>
        <label for="txtAddr">Address:</label>
        <input id="txtAddr" type="text" value="" />
      </li><li>
        <label for="txtCity">City:</label>
        <input id="txtCity" type="text" value="" />
      </li><li>
        <label for="txtState">State:</label>
        <input id="txtState" type="text" value="" />
      </li><li>
        <label for="txtZip">Zip Code:</label>
        <input id="txtZip" type="text" value="" />
      </li>
   </ul>
</div>

使用 label 总是一个好主意秒。这是工作版本:http://jsfiddle.net/Fmzbm/