Question

我一直在寻找Stack Overflow来解决我的问题，但是似乎没有任何效果。我正在尝试为我的网站创建一个水平导航栏。我之前做过一个，所以我只是复制了CSS和HTML代码，但是没有用。我尝试再次手动编码，并使用float: left和display: inline-block，但还是没有运气。

HTML：

<div class='navbar'>
    <p class="active"><a href="index.html">Home</a></p>
    <p><a href="explore.html">Explore</a></p>
</div>

CSS：

.navbar a {
    display: inline-block;
}

Answer 1

您不需要段落（<p>）标记，这些标记仅用于实际段落，因此它们之间需要行分隔。如果您只是在同一行上创建按钮，则不需要它们。

示例：

<div class='navbar'>
    <a href="index.html">Home</a>
    <a href="explore.html">Explore</a>
</div>

Answer 2

将flex用于导航栏样式，例如，尝试遵循以下代码：

.navbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

此代码从左到右排列元素并设置垂直对齐中心。

如何水平排列HTML元素？

2 个答案: