Question

HTML / CSS初学者，试图找出最好的做事方式。理想情况下，有一个解释和解决方案会很好。

所以我要做的是并排放置几个按钮（可能是5-6个），然后是标签

使用相同的CSS类格式化按钮。要将它们并排放置，我设置float：left;

不幸的是，这也将按钮（标签）之后的下一个元素放在同一行上，即使我设置了clear：both;为标签。

问题是浮动：左;管理围绕给定元素的其他元素的格式。这对于前n-1个按钮非常有用，因为它将下一个按钮放在它的侧面。但它也将标签放在最后一个按钮旁边。

有没有办法解决此问题而无需在最后一个按钮上添加特定的CSS格式，或者提供强制标签位于下一行的特定宽度？（或许可以采用不同的方法完成此操作？）

这是我现在正在做的一个例子：

<style>
  .myButton {
    float: left;
  }
  #myLabel {
    clear: both;
  }
</style>
<div>
  <button class="myButton">Button 1</button>
  <button class="myButton">Button 2</button>
  <button class="myButton">Button 3</button>
  <button class="myButton">Button 4</button>
  <label id="myLabel">Output Text</label>
</div>

由于

Answer 1

默认情况下，

label是inline元素。 clear但是only works on block-level elements，这是有道理的。

您必须将按钮包装在单独的元素中，和/或将display:block应用于标签。

Answer 2

你不需要漂浮按钮;它们自然会像文本一样彼此相邻（有点）。如果您想将标签放在自己的行上，您有几个选择：

在最后一个按钮和标签

<br />

在CSS中制作你的标签display: block;，这将确保它是唯一的东西（在花车消失后）

Answer 3

请检查：jsFiddle。我基本上将按钮包裹在<div id="buttons">中，并为<div>分配了以下样式。

#buttons {
    width: 100%;
    overflow: hidden;
}

并排浮动同一类的元素的最佳方法是什么？

3 个答案: