Question

我创建了一个JSFiddle来演示我的问题 http://jsfiddle.net/02n979r2/4/

我所拥有的只是一个简单的注册表单，列表中包含输入元素。

其中一些输入需要是容器的整个宽度。有些需要只有一半，因此浮动到左侧（所以我可以在同一行上有两个文本字段）。

但是，一旦我将浮动应用于包裹输入文本字段的<li>，即使我已应用<li>，任何其他clear: both元素也不会清除上面的浮点数到<li>

任何人都可以解释为什么它的表现如此以及如何解决它？

这是HTML：

<form>
    <fieldset>
<ol>
    <li><select name="department">
        <option value="sales">Sales</option>
        <option value="finance">Finance</option>
        <option value="logistics">Logistics</option>
        </select>
    </li>
    <li class="halfwidth floatleft"><input class="fullwidth" type="text" placeholder="First Name" /></li>
    <li class="halfwidth floatleft"><input class="fullwidth" type="text" placeholder="Last Name" /></li>
    <!-- Company does not clear the float and margin is lost -->
    <li class="fullwidth clearboth"><input class="fullwidth" type="text" placeholder="Company" /></li>
    <li class="fullwidth"><input class="fullwidth" type="email" placeholder="EMail" /></li>
</ol>
    </fieldset>
</form>

这是CSS：

li + li {margin-top: 10px;}
.floatleft {float: left;}
.fullwidth {width: 100%;}
.halfwidth {width: 40%;}
.halfwidth + .halfwidth {margin-left: 30px;}
.clearboth {clear: both;}

Answer 1

这些东西不需要列表项。设置表单样式的一种好方法是使用Bootstrap： http://getbootstrap.com/css/#forms

Answer 2

它完美无缺。但是，由于拥有以下CSS规则.halfwidth + .halfwidth {margin-left: 30px;}，公司也可以获得保证金。

以下fiddle显示相同的代码，同时从该字段中删除边距。这会解决你的问题吗？

Answer 3

关于添加：

.halfwidth:nth-child(3+2n) {clear:both}

从第3个开始清除每个第二个半宽。

如何在同一列表中浮动/清除列表项

3 个答案: