Question

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

我将float:left放在按钮类的样式中。

那为我做了这份工作。

看看this。如果我将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 }

这将使段落保持并排。 Example

如果你需要设置段落显示：inline-block，那么默认情况下要将这些元素更改为内联元素的元素，以使它在旧的IE中工作。

Answer 2

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

回答你的主题问题是肯定的，如果div-tag和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;
}

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

float：left会使许多<div> s / <p>停留在一行吗？</p> </div>

2 个答案: