我正在尝试在同一行上创建一个导航栏。我试过使用 flex-direction: row。使所有列表项内联,但没有用。有什么想法吗?
@media (min-width: 900px) {
.main-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-name {
margin-left: 1%;
}
.main-nav {
display: flex;
background-color: orange;
}
.main-nav li {
padding: 0.3em;
align-items: flex-end;
}
}
<header class="main-header">
<h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1>
<nav class="main-nav">
<li class="nav-item-1"><a href="#">home</a></li>
<li><a href="#">services</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">FREE QUOTE</a></li>
</nav>
</header>
最佳答案
问题出在@media (min-width: 900px)
,只要把你的css代码移到@media (min-width: 900px)
block 之外,然后一切都会工作。一个小问题是您在 nav
标签内定义了 li
标签,这在语义上不正确,标记无效,您应该将 nav
替换为 ul
标签
@media (min-width: 100px) {
}
.main-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-name {
margin-left: 1%;
}
.main-nav {
display: flex;
list-style-type: none;
background-color: orange;
}
.main-nav li {
padding: 0.3em;
align-items: flex-end;
}
<header class="main-header">
<h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1>
<ul class="main-nav">
<li class="nav-item-1"><a href="#">home</a></li>
<li><a href="#">services</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">FREE QUOTE</a></li>
</ul>
</header>
关于html - Flexbox:最后一个导航列表项移动到新行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44131961/