导航栏元素堆叠在一起，我希望它们彼此相邻

Question

我正在尝试建立一个网站，但我是编码新手。导航栏显示元素彼此重叠。如何使它们彼此相邻？ 这是我的代码。提前谢谢你:) .html：

<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
<a href="#" class="logo">
<div class="logo_area">
<div>
<img id="website_logo" src="images/logo.png" alt="Logo">
</div>
<div class="site_title">
<h1 class="title">title</h1>
<h2 class="subtitle">subtitle</h2>
</div>
</div>
</a>
<ul class="main-nav">
<li>
<a href="index.html" class="nav-links">HOME</a>
</li>
<li>
<a href="about.html" class="nav-links">ABOUT</a>
</li>
<li>
<a href="contact.html" class="nav-links">CONTACT</a>
</li>
</ul>
</nav>

............ .css：

.navbar {
font-size: 18px;
background: rgba(196, 196, 196, 0.6);
padding-bottom: 10px;
}
.main-nav {
display:inline;
}
.nav-links,
.logo {
text-decoration: none;
color: black;
font-family: raleway, sans-serif;
}
.fa-bars:before{
color: black;
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 26px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}

............

Answer 1

由于您在此处使用 list 它的位置是垂直的，如果您需要它水平对齐，请在<li>标记中使用display:inline-block;。

Answer 2

萨拉，很高兴你开始编码了！我自己的技巧之一是添加

* { outline: 1px solid red; }

然后，您可以看到所有元素以及它们占用的空间。您可以看到您添加了显示：内联;相反<ul>，最好将其放在<li>元素上。

请参阅下面的示例，祝您编码愉快！

.navbar {
font-size: 18px;
background: rgba(196, 196, 196, 0.6);
padding-bottom: 10px;
}
.main-nav {
/* display: inline; removed */
}
.nav-links,
.logo {
text-decoration: none;
color: black;
font-family: raleway, sans-serif;
}
.fa-bars:before{
color: black;
}
.main-nav li {
display: inline; /* added */
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 26px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}

<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
<a href="#" class="logo">
<div class="logo_area">
<div>
<img id="website_logo" src="images/logo.png" alt="Logo">
</div>
<div class="site_title">
<h1 class="title">title</h1>
<h2 class="subtitle">subtitle</h2>
</div>
</div>
</a>
<ul class="main-nav">
<li>
<a href="index.html" class="nav-links">HOME</a>
</li>
<li>
<a href="about.html" class="nav-links">ABOUT</a>
</li>
<li>
<a href="contact.html" class="nav-links">CONTACT</a>
</li>
</ul>
</nav>

Answer 3

您可以使用flexbox轻松解决此问题。

第 1 步。

在这种情况下，通过在容器元素上应用display: flex<nav class="navbar">可以使所有子元素水平堆叠。

第 2 步。

通过在<ul class="main-nav">上应用(再次(display: flex，使子元素<li>彼此水平堆叠。

水平间距可以应用于justify-content属性。

下面是一个最小的例子。

/*
assigning height of the navbar
and aligning contents center
*/
.navbar {
height: 10em;
display: flex;
align-items: center;
justify-content: space-between;
}
/* You can assign width
on the child elements
*/
.logo {
width: 10%;
}
.main-nav ul {
display: flex;
justify-content: center;
list-style: none;
height: 100%;
align-items: center;
}
/*
Adding some margin
or you could use space-between; on ul
*/
li {
margin-right: 1em;
}
li:last-child {
margin-right: 0;
}

<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
<a href="#" class="logo">
<div class="logo_area">
<div>
<img id="website_logo" src="images/logo.png" alt="Logo">
</div>
<div class="site_title">
<h1 class="title">title</h1>
<h2 class="subtitle">subtitle</h2>
</div>
</div>
</a>
<ul class="main-nav">
<li>
<a href="index.html" class="nav-links">HOME</a>
</li>
<li>
<a href="about.html" class="nav-links">ABOUT</a>
</li>
<li>
<a href="contact.html" class="nav-links">CONTACT</a>
</li>
</ul>
</nav>

从CSS-Tricks了解更多关于Flexbox的信息，请点击此处。

新的很酷的布局方式

祝您编码愉快！