如何使導航欄延伸到整個屏幕？

Question

我在想要它們的位置有導航鏈接，但是我希望條形圖拉伸頁面的整個寬度。 基本上，我希望在屏幕的整個長度上都有一條藍線，並使鏈接保持在原處。 我嘗試過“ 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> 

Answer 1

我改用display: flex; 下面而不是像上面那樣使用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> 

Answer 2

您的意圖是將width:100%放置在正確的軌道上，但是其他樣式的組合也會干擾：

1. 該導航條li浮起的項目是不必要的，並造成其他問題。 我通過在.navbar應用text-align: right來創建相同的效果
2. 導航欄li需要的項目是display: inline-block來顯示任意的。 否則，它們將假定容器的寬度，因為其中的a內部將display: block
3. 我還刪除了所有不必要的類，並使用.navbar li選擇器（與a元素的概念相同）簡單地設置了li的樣式。

最后，我對.navbar應用了背景以演示它是全寬的。 如果您希望它是藍色的，只需更改背景顏色即可！

 .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> 

Answer 3

因為所有li元素都是浮動的，所以它隱藏了父元素的高度。 父元素也沒有背景色。

這就是我要做的。

 .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> 

Answer 4

您可以使用CSS flexbox將導航欄配置為延伸到任何屏幕寬度。 這可以通過在現有代碼中添加幾行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;
}

您可以在此處查看生成的導航欄： https : //codepen.io/aaronadler/pen/vzBOeN