html - float:left 会做很多吗秒/留在单行吗？

Question

我有 5 个菜单按钮一个接一个地显示在一行中。

我输入float:left了按钮类的样式。

那为我完成了工作。

看看这个。如果我更改display:inline为float:left，它不会排列 2 段。 哪种方法是正确的？

编辑：我发现它在 JS Fiddle 中运行良好，但在 w3schools 上却不行。所以这会造成一些混乱。

Answer 1

HTML

<div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

CSS

div { white-space: nowrap }
p { display: inline }

这将使段落始终并排。例子

如果您需要将段落设置为 display: inline-block，请务必将这些元素更改为默认为 inline-elements 的元素，以使其在较旧的 IE 中工作。

Answer 2

我想你可以使用任何一个。我个人会为您的按钮布局选择浮动元素。

对您的主题问题的回答是肯定的，如果 div-tags 和 p-tags 的宽度总和不大于周围元素的宽度，它们将保持在同一行。

例如：

//HTML
<div class="wrapper">
    <div class="button">buttoncontent</div>
    <div class="button">buttoncontent</div>
</div>  

//CSS
.wrapper {
    width: 100px;
}

.button {
    float: left;
    width: 60px;
}

在示例中，第二个按钮将打印在自己的行上，因为按钮的总宽度为 120 像素，而周围元素的宽度仅为 100 像素。如果类按钮的宽度为 40 像素，则两个按钮元素将打印在同一行上。