Question

我正在创建一个使用Div的菜单栏。唯一的问题是每个div由于其块样式属性而垂直位于彼此之上，但我希望它是一个水平条。

这是我的CSS代码：

#homeButton{
height: 50px;
width: 125px;
background-color: lightblue;
}

这是HTML代码：

<div id="homeButton">
<p id="homeButtonText">Home</p>
</div>

我试过了：

#homeButton{
height: 50px;
width: 125px;
background-color: lightblue;
display: inline; /*New Line of Code*/
}

当我使用它时，它不会使div的排列，而是带走淡蓝色。

Answer 1

更改您的CSS并使用display:inline-block;我还建议您使用class而不是id，因为您希望此样式适用于菜单中的所有按钮。您不应该多次使用相同的id，因为id用于定位特定元素。

如果您希望将其应用于所有菜单按钮，那么我会这样做......

.menuButton{
height: 50px;
width: 125px;
background-color: lightblue;
display:inline-block;
text-align:center;
}

    <div class="menuButton">
    <p id="homeButtonText">Home</p>
    </div>
    <div class="menuButton">
    <p id="aboutButtonText">About</p>
    </div>

您可能希望将段落<p>标记替换为锚<a href="link">Home</a>标记。 Anchor标签带有一些默认样式，因此如果您想删除下划线，可以使用text-decoration:none;执行此操作，您可能还想使用color:black;，因为它默认显示为蓝色。

如何防止Div创建新行

1 个答案: