1

我仍然是 HTML/css 布局的新手，但我试图设置蓝色导航栏的宽度以覆盖我的所有容器/父区域。如您所见，我左右各有 100 像素？差距..我想用我的导航栏来覆盖它。你能检查我的代码并帮助我以正确的方式编写它吗？似乎相对位置不起作用。谢谢见下图

body, html
{
	margin: 0;
	padding: 0;
}
*
{
	box-sizing: content-box;
	padding: 0;
	margin: 0;
  color:#FFF;
}

.content
{
	width: 80%;
	background-color: red;
	height: 400px;
	text-align: center;
	margin: 0 auto;	
}
nav
{
	font-size: 0;
	
}

nav .menu li

{
	list-style-type: none;
	display: inline-block;
	
}

nav .menu li a

{
	text-decoration: none;
	font-size: 20px;
	background-color: blue;
	padding: 20px;
    display: table-cell;
    width: 250px;
    height: 25px;
   
  

}

nav .menu li a:hover
{
	background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
	<meta charset="UTF-8">
	<title>Website</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="content">
	<nav>
		<ul class="menu">
			<li><a href="#">Home</a></li>
			<li><a href="#">Home</a></li>
			<li><a href="#">Home</a></li>
			<li><a href="#">Home</a></li>
			<li><a href="#">Home</a></li>
		</ul>
	</nav>
</div>

</body>
</html>

4

2 回答 2

0

我已经修改了您的代码，导航现在应该跨越整个宽度。欢迎来到堆栈溢出！

https://jsfiddle.net/ofbnaks7/1/

我添加了position: relative; width: 100%;确保每个列表项跨越列表的宽度，即其父项。接下来，由于您的列表项中有锚点，因此我设置display: block; width: 100%;以确保它们显示在正确的位置并填充其父项的宽度。另外，我添加box-sizing: border-box;了锚点。由于您的锚点上有填充，这意味着填充将在 100% 的宽度“内部”，而不是外部，如果这有意义的话。

于 2017-09-08T19:09:19.040 回答
0

作为替代方法，您可以考虑CSS Flexbox。
这是一个方便的指南。

flex 布局的定义方面是能够改变其项目的宽度和/或高度以最适合任何显示设备上的可用空间。弹性容器扩展项目以填充可用空间，或缩小它们以防止溢出......块布局是垂直偏向的；内联布局是水平偏置的。Flexbox 布局也允许。

下面，我把你的<ul>元素变成了一个灵活的盒子容器，这样所有的孩子一起填充水平空间。我允许菜单项在必要时换成多行。我还将您的<a>元素设置为display:block，以便每个元素都填充其 parent 的宽度<li>。

.content {
  width: 80%;
  height: 400px;
  background-color: red;
  margin: 0 auto;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.menu li {
  flex-grow: 1;
}

.menu li a {
  display: block;
  font-size: 20px;
  background-color: blue;
  padding: 20px;
  height: 25px;
  color: white;
  text-decoration: none;
  text-align: center;
}

.menu li a:hover {
  background-color: yellow;
  color: black;
}
<div class="content">
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
    </ul>
  </nav>
</div>

注意Flexbox 的浏览器兼容性。

您也可以使用display:table-cell您开始实施的方法。同样，关键是将<a>元素设置为display:block使其背景覆盖其父项的宽度。

.content {
  width: 80%;
  background-color: red;
  height: 400px;
  text-align: center;
  margin: 0 auto;
}

.menu {
  display: table;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.menu li {
  display: table-cell;
}

.menu li a {
  display: block;
  text-decoration: none;
  font-size: 20px;
  padding: 20px;
  height: 25px;
  background-color: blue;
  color: white;
}
.menu li a:hover {
  background-color: yellow;
  color: black;
}
<div class="content">
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
    </ul>
  </nav>
</div>

但最简单的解决方案可能是将蓝色背景颜色从您的<a>元素移动到<ul>or<nav>元素：

.content {
  width: 80%;
  background-color: red;
  height: 400px;
  margin: 0 auto;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: blue;
  font-size: 0;
  text-align: center;
}

.menu li {
  display: inline-block;
}

nav .menu li a {
  display: block;
  text-decoration: none;
  font-size: 20px;
  padding: 20px;
  height: 25px;
  color: white;
}

nav .menu li a:hover {
  background-color: yellow;
  color: black;
}
<div class="content">
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
    </ul>
  </nav>
</div>

于 2017-09-08T19:28:36.500 回答