浮动左 <UL> 列表，其中浮动右文本框设置在 UL 列表下方，而不是设置为相邻答案

【问题标题】：Float Left <UL> list with float right text boxes that are set below the UL list instead of set adjacent浮动左 <UL> 列表，其中浮动右文本框设置在 UL 列表下方，而不是设置为相邻
【发布时间】：2011-03-03 00:55:57
【问题描述】：

我只是想将一个无序列表向左浮动，一组文本框向右浮动，以便它们彼此相邻并且在 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>

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

【问题讨论】：

标签： html css

【解决方案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>

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

【讨论】：

【解决方案2】：

您没有为这些字段使用<label> 标签有什么具体原因吗？

要回答您的 CSS 问题，如果您希望两个元素并排使用，则不需要 clear:both。

【讨论】：

【解决方案3】：

考虑更改您的标记：

HTML： First Name:

CSS：

.FirstObj label { float:left; } .FirstObj input { float:right; }

代码提示被顶起，需要尝试更多格式。

【讨论】：

【解决方案4】：

演示http://jsfiddle.net/qnev2/

您可能希望更改li CSS 规则的固定宽度以满足您的需要，同时更改标记并使用语义更正确的label 标记。这也避免了 float 属性，根据我的经验，如果重新排列 HTML，可能会导致不良行为。

【讨论】：