Question

提交按钮似乎没有正确清除，也没有添加浮动。有人可以为我清楚这一点（没有双关语）。

CSS：

.left {float:left}
.clear {clear:both}

形式：

<form>
  <label class="left">Label</label>
  <input type="text" class="left">
  <label class="clear left">Label</label>
  <input type="text" class="left">
  <input type="submit" class="clear">
</form>

Answer 1

我可能不太清楚你的意图，但如果你想让你的按钮到它自己的行，你可以强制它使用display：block，它会转到下一行。

这是CSS：

.left {float:left;}
.clear {clear:both;}
input[type=submit] {display: block;}

** jsfiddle sample here

Answer 2

提交按钮未移至下一行的原因是input是内联元素。根据{{3}}，内联元素会忽略clear（相关引用：“适用于：块级元素”）。在提交按钮上设置float的工作原因是CSS spec。您可以通过直接在要清除的提交按钮上设置display: block来实现相同的效果：

.left {float:left}
.clear {clear:both}
input[type=submit].clear {display:block}

清除输入而不添加Float

2 个答案: