1

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

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

那为我完成了工作。

看看这个。如果我更改display:inlinefloat:left,它不会排列 2 段。 哪种方法是正确的?

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

4

2 回答 2

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 中工作。

于 2012-06-02T21:25:03.200 回答
0

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

对您的主题问题的回答是肯定的,如果 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 像素,则两个按钮元素将打印在同一行上。

于 2012-06-02T20:42:24.210 回答