如何水平排列HTML元素?

I have looked around Stack Overflow for an answer to my problem, but nothing seems to work. I am trying to create a horizontal navbar for my site. I have made one before, so I just copied the CSS and HTML code over, but it didn't work. I tried coding it again by hand, and using float: left and display: inline-block but still no luck.

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;
}
评论
  • verror
    verror 回复

    You do not need the paragraph (<p>) tags, those are only for actual paragraphs, that would need to have line separations between them. If you are just creating buttons on the same line, you do not need them.

    例:

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

    use the flex for navbar style, for example, try follow code:

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

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