html - 并排 float 同一类元素的最佳方法是什么？

Question

这里是 HTML/CSS 初学者，试图找出做事的最佳方式。理想情况下，最好有解释和解决方案。

所以我想做的是并排放置几个按钮(可能是 5-6 个)，然后是一个标签

按钮使用相同的 CSS 类进行格式化。为了并排放置它们，我设置了 float: left;

不幸的是，即使我设置了 clear: both; ，这也会将按钮(标签)之后的下一个元素放在同一行上。用于标签。

问题是 float: left;控制给定元素周围其他元素的格式。这对于前 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 元素。 清晰然而only works on block-level elements ，这是有道理的。

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