[英]How Do I Get My Navigation Bar To Stretch Across The Screen?
I have the navigation links where I want them, but I want the bar to stretch the full-width of the page. 我在想要它们的位置有导航链接,但是我希望条形图拉伸页面的整个宽度。 Basically, I want a blue line across the whole length of the screen and the links to stay where they are.
基本上,我希望在屏幕的整个长度上都有一条蓝线,并使链接保持在原处。 I've tried "width:100%" but when I do that, the links become a vertical list again, instead of a horizontal line.
我尝试过“ width:100%”,但是当我这样做时,链接再次变为垂直列表,而不是水平线。
.navbar { list-style-type:none; margin:0; padding:0; } .navbar2 { float:right; background-color:#1a75ff; } .navbar3 { display:block; padding:14px 16px; text-align:center; text-decoration:none; color:black; } li a.active { background-color: #0047b3; display:block; padding:14px 16px; text-align:center; text-decoration:none; color:white; }
<ul class="navbar"> <li class="navbar2"><a class="navbar3" href="#contactme">Contact Me</a></li> <li class="navbar2"><a class="navbar3" href="#appointment">Make An Appointment</a></li> <li class="navbar2"><a class="navbar3" href="#blog">Blog</a></li> <li class="navbar2"><a class="navbar3" href="#testimonials">Testimonials</a></li> <li class="navbar2"><a class="navbar3" href="#aboutme">About Me & My Job</a></li> <li class="navbar2"><a class="active" href="#home">Home</a></li>
I switched to using display: flex;
我改用
display: flex;
below instead of using float
s like you were doing above, lemme know if this is right: 下面而不是像上面那样使用
float
,lemme知道这是否正确:
.navbar { list-style-type:none; margin:0; padding:0; display: flex; } .navbar2 { background-color:#1a75ff; display: flex; justify-content: center; align-items: center; } .navbar3 { display:block; padding:14px 16px; text-align:center; text-decoration:none; color:black; } .navbar2.active { background-color: #0047b3; color:white; } li a.active { background-color: #0047b3; display:block; padding:14px 16px; text-align:center; text-decoration:none; color:white; }
<ul class="navbar"> <li class="navbar2"><a class="navbar3" href="#contactme">Contact Me</a></li> <li class="navbar2"><a class="navbar3" href="#appointment">Make An Appointment</a></li> <li class="navbar2"><a class="navbar3" href="#blog">Blog</a></li> <li class="navbar2"><a class="navbar3" href="#testimonials">Testimonials</a></li> <li class="navbar2"><a class="navbar3" href="#aboutme">About Me & My Job</a></li> <li class="navbar2 active"><a class="active" href="#home">Home</a></li> </ul>
Your instinct to put width:100%
was on the right track, however there were a combination of other styles interfering: 您的意图是将
width:100%
放置在正确的轨道上,但是其他样式的组合也会干扰:
li
items being floated was unnecessary, and causing other issues. li
浮起的项目是不必要的,并造成其他问题。 I created the same effect by applying text-align: right
to the .navbar
.navbar
应用text-align: right
来创建相同的效果 li
items needed to be display: inline-block
to display as desired. li
需要的项目是display: inline-block
来显示任意的。 Otherwise, they were assuming the width of the container because the a
inside of them are display: block
a
内部将display: block
li
by using the .navbar li
selector (same concept for the a
elements). .navbar li
选择器(与a
元素的概念相同)简单地设置了li
的样式。 LASTLY, I applied a background to the .navbar
to demonstrate it is full width. 最后,我对
.navbar
应用了背景以演示它是全宽的。 If you want it to be blue, simply change the background color to match! 如果您希望它是蓝色的,只需更改背景颜色即可!
.navbar { display: block; width: 100%; list-style-type: none; margin: 0; padding: 0; background: #aaa; text-align: right; } .navbar li { display: inline-block; background-color: #1a75ff; } .navbar a { display: block; padding: 14px 16px; text-align: center; text-decoration: none; color: black; } .navbar a.active { background-color: #0047b3; display: block; padding: 14px 16px; text-align: center; text-decoration: none; color: white; }
<ul class="navbar"> <li><a href="#contactme">Contact Me</a></li> <li><a href="#appointment">Make An Appointment</a></li> <li><a href="#blog">Blog</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#aboutme">About Me & My Job</a></li> <li><a class="active" href="#home">Home</a></li>
Because all of the li elements are floated, it hides the height of the parent element. 因为所有li元素都是浮动的,所以它隐藏了父元素的高度。 Also the parent element doesn't have a background color.
父元素也没有背景色。
Here's how I would do it. 这就是我要做的。
.navbar { list-style-type:none; margin:0; padding:0; width:100%; background-color:#1a75ff; display:block; text-align:right; } .navbar2 { display:inline-block; background-color:#1a75ff; } .navbar3 { display:block; padding:14px 16px; text-align:center; text-decoration:none; color:black; } li a.active { background-color: #0047b3; display:block; padding:14px 16px; text-align:center; text-decoration:none; color:white; }
<ul class="navbar"> <li class="navbar2"><a class="active" href="#home">Home</a></li> <li class="navbar2"><a class="navbar3" href="#aboutme">About Me & My Job</a></li> <li class="navbar2"><a class="navbar3" href="#testimonials">Testimonials</a></li> <li class="navbar2"><a class="navbar3" href="#blog">Blog</a></li> <li class="navbar2"><a class="navbar3" href="#appointment">Make An Appointment</a></li> <li class="navbar2"><a class="navbar3" href="#contactme">Contact Me</a></li> </ul>
You can configure your navbar to stretch across any screen width using CSS flexbox. 您可以使用CSS flexbox将导航栏配置为延伸到任何屏幕宽度。 This can be done by adding just a few lines of CSS to your existing code:
这可以通过在现有代码中添加几行CSS来完成:
ul.navbar {
list-style-type:none;
margin:0;
padding:0;
width:100%;
display:flex;
flex-direction:row-reverse;
}
li.navbar2 {
flex-grow:1;
align-self:center;
height:100%;
background-color:#1a75ff;
}
a.navbar3 {
display:block;
padding:14px 16px;
text-align:center;
text-decoration:none;
color:black;
}
li a.active {
background-color: #0047b3;
display:block;
padding:14px 16px;
text-align:center;
text-decoration:none;
color:white;
}
You may view the resulting navbar here: https://codepen.io/aaronadler/pen/vzBOeN 您可以在此处查看生成的导航栏: https : //codepen.io/aaronadler/pen/vzBOeN
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.