时间戳

首页 > 解决方案 > 如何水平排列 HTML 元素？

html - 如何水平排列 HTML 元素？

问题描述

我环顾 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;
}

标签： htmlcss

解决方案

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

例子：

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

推荐阅读