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>

可能是因为我不需要清除最后一个列表项上的浮点数吗？

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/

Answer 2

您是否有任何特定原因未对这些字段使用<label>标记？

要回答您的CSS问题，如果您希望它们并排放置，则不需要clear:both。

Answer 3

考虑更改标记：

HTML： First Name:

CSS：

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

代码提示被抬高，需要尝试更多格式化。

Answer 4

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

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

浮动左<ul>列表，浮动右侧文本框设置在UL列表下方而不是设置为邻近</ul>

4 个答案: