如何阻止 <nav> 在中间分裂
How do I stop <nav> from splitting in the middle
我正在用 <nav>
元素制作这个导航栏。我有一个 link 向右浮动,其余向左浮动,以最大化导航栏的大小。但是,据我所知,第 nth-1 link 和 n 之间的所有 space 都没有背景颜色或存在。代码非常基础,如果有人不介意查看结果,它会更有意义。
nav {
background-color: #333;
}
nav ul {
list-style-type: none;
width: 95%;
padding: 0;
margin: 0 auto;
background-color: #333;
}
nav ul li {
float: left;
background-color: #333;
}
nav ul li a {
font-size: 21px;
display: block;
text-align: center;
padding: 15px 15px;
text-decoration: none;
}
<nav>
<ul>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li style='float:right;'><a href='#'>Link</a>
</li>
</ul>
</nav>
您需要将高度设置为 nav
或 ul
,因为它包含浮动元素(因此没有高度)。
nav {height: 60px;}
看到这个 fddle:https://jsfiddle.net/cm9jsyb5/
你需要一个 clearfix 的脚。浮动元素从正常文档流中移除,因此父元素折叠。有几种修复方法,clearfix 是一种常见的方法。另一个是浮动父元素。
nav {
background-color: #333;
}
nav ul {
list-style-type: none;
width: 95%;
padding: 0;
margin: 0 auto;
background-color: #333;
}
nav ul li {
float: left;
background-color: #333;
}
nav ul li:last-child {
float: right;
}
nav ul li a {
font-size: 21px;
display: block;
text-align: center;
padding: 15px 15px;
text-decoration: none;
}
.clearfix {
overflow: auto;
zoom: 1;
}
<nav>
<ul class="clearfix">
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
</ul>
</nav>
有关浮动行为的更多信息,请参阅:https://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/
另请注意,您可以使用 last-child
并摆脱内联样式。
你可以把它当作一个 flexbox:
1.) 将 display: flex;
添加到 nav ul
。这使得所有 li
个元素都为弹性项目。
2.) 将最后一个 li
元素中的内联样式更改为 margin-left: auto
。这会将那个元素移到最右边。
(我还更改了 link 文本颜色,以便在深色背景上获得更好的对比度,另外我删除了相当多的 CSS,如果您使用 flexbox,则不需要)
nav {
background-color: #333;
}
nav ul {
display: flex;
list-style-type: none;
width: 95%;
padding: 0;
margin: 0 auto;
}
nav ul li a {
color: #fa0;
font-size: 21px;
display: block;
text-align: center;
padding: 15px 15px;
text-decoration: none;
}
<nav>
<ul>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li style='margin-left: auto;'><a href='#'>Link</a>
</li>
</ul>
</nav>
我正在用 <nav>
元素制作这个导航栏。我有一个 link 向右浮动,其余向左浮动,以最大化导航栏的大小。但是,据我所知,第 nth-1 link 和 n 之间的所有 space 都没有背景颜色或存在。代码非常基础,如果有人不介意查看结果,它会更有意义。
nav {
background-color: #333;
}
nav ul {
list-style-type: none;
width: 95%;
padding: 0;
margin: 0 auto;
background-color: #333;
}
nav ul li {
float: left;
background-color: #333;
}
nav ul li a {
font-size: 21px;
display: block;
text-align: center;
padding: 15px 15px;
text-decoration: none;
}
<nav>
<ul>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li style='float:right;'><a href='#'>Link</a>
</li>
</ul>
</nav>
您需要将高度设置为 nav
或 ul
,因为它包含浮动元素(因此没有高度)。
nav {height: 60px;}
看到这个 fddle:https://jsfiddle.net/cm9jsyb5/
你需要一个 clearfix 的脚。浮动元素从正常文档流中移除,因此父元素折叠。有几种修复方法,clearfix 是一种常见的方法。另一个是浮动父元素。
nav {
background-color: #333;
}
nav ul {
list-style-type: none;
width: 95%;
padding: 0;
margin: 0 auto;
background-color: #333;
}
nav ul li {
float: left;
background-color: #333;
}
nav ul li:last-child {
float: right;
}
nav ul li a {
font-size: 21px;
display: block;
text-align: center;
padding: 15px 15px;
text-decoration: none;
}
.clearfix {
overflow: auto;
zoom: 1;
}
<nav>
<ul class="clearfix">
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
</ul>
</nav>
有关浮动行为的更多信息,请参阅:https://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/
另请注意,您可以使用 last-child
并摆脱内联样式。
你可以把它当作一个 flexbox:
1.) 将 display: flex;
添加到 nav ul
。这使得所有 li
个元素都为弹性项目。
2.) 将最后一个 li
元素中的内联样式更改为 margin-left: auto
。这会将那个元素移到最右边。
(我还更改了 link 文本颜色,以便在深色背景上获得更好的对比度,另外我删除了相当多的 CSS,如果您使用 flexbox,则不需要)
nav {
background-color: #333;
}
nav ul {
display: flex;
list-style-type: none;
width: 95%;
padding: 0;
margin: 0 auto;
}
nav ul li a {
color: #fa0;
font-size: 21px;
display: block;
text-align: center;
padding: 15px 15px;
text-decoration: none;
}
<nav>
<ul>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li style='margin-left: auto;'><a href='#'>Link</a>
</li>
</ul>
</nav>