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，我知道这是否正确：

.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%的本能是正确的，但是其他样式的组合也会干扰：

不需要导航的导航栏li项目，这会导致其他问题。我通过将text-align: right应用于.navbar
导航栏li项需要display: inline-block才能显示。否则，它们将假定容器的宽度，因为其中的a是display: block
我还删除了所有不必要的类，并使用li选择器（.navbar li元素的相同概念）简单地设置了a的样式。

最后，我为.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

如何使导航栏延伸到整个屏幕？

4 个答案: