Question

这是我的问题

header {
  width: 100%;
  height: 81px;
  background: #669999;
  line-height: 81px;
}

header nav {
  float: right;
  margin-right: 15%;
  background: green;
}

header nav ul {
  background: yellow;
  width: 650px;
}

header nav li {
  display: inline-block;
  margin-left: 20px;
  width: 180px;
  height: 36px;
  background: #006666;
  margin-top: 20px;
  margin: auto;
}

header nav li a {
  background: red;
  margin: auto;
}

<header>
  <nav>
    <ul>
      <li><a href="">About</a></li>
      <li><a href="">Works</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>

我想知道为什么<a>链接未与 <li>列表中的对齐？

<a>链接与标题垂直对齐，因此它很完美，但<li>列表位于上方。

Answer 1

将text-align: center;设为li
删除height li或将其增加（至height: 81px;）

＆＃13;

* {
	margin:0;padding:0;
}
header {
	width:100%;
	height:81px;
	background:#669999;
	line-height: 81px;

}
header img {
	margin-left:15%;
	margin-top:20px; /* 50% img-height */
}
header nav {
	float:right;
	margin-right:15%;
	background: green;
}
header nav ul {
	background:yellow;
	width:650px;

}
header nav li {
    display: inline-block;
    margin-left: 20px;
    width: 180px;
    /* height: 36px; */
    background: #006666;
    margin-top: 20px;
    margin: auto;
    text-align: center;
}
header nav li a {
	background:red;
	margin:auto;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<header>
		<nav>
			<ul>
				<li><a href="">About</a></li>
				<li><a href="">Works</a></li>
				<li><a href="">Contact</a></li>
			</ul>
		</nav>
	</header>
</body>
</html>

＆＃13;

Answer 2

实际上您正面临继承问题。在标头上定义line-height时，它将由li和a继承。 li是inline-block元素，其高度由您添加的固定高度（或默认为其内容的高度）定义

a元素是一个内联元素，它的高度由它的行高（从li继承）定义，从逻辑上讲，你将有一个溢出，因为它将大于高度li (81px > 36px)。如果您从li移除固定高度，其高度将等于81px，即其内容a的高度。

要避免这种情况，您只需要将line-height的{{1}}设为li（initial也会继承它）并删除已修复的内容，从而删除继承高度：

* {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 81px;
  background: #669999;
  line-height: 81px;
}

header nav {
  background: green;
}

header nav ul {
  background: yellow;
}

header nav li {
  display: inline-block;
  margin-left: 20px;
  width: 180px;
  line-height: initial;
  background: #006666;
  margin-top: 20px;
  margin: auto;
}

header nav li a {
  background: red;
  margin: auto;
}

如果您想要将固定高度定义为<header> <nav> <ul> <li><a href="">About</a></li> <li><a href="">Works</a></li> <li><a href="">Contact</a></li> </ul> </nav> </header>，只需指定其行高等于其固定高度：

li

* {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 81px;
  background: #669999;
  line-height: 81px;
}

header nav {
  background: green;
}

header nav ul {
  background: yellow;
}

header nav li {
  display: inline-block;
  margin-left: 20px;
  width: 180px;
  height:36px;
  line-height: 36px;
  background: #006666;
  margin-top: 20px;
  margin: auto;
}

header nav li a {
  background: red;
  margin: auto;
}

Answer 3

你有标题所包含的行高问题。

1.删除li的高度或将其增加到65px。

要将块元素的内联内容（如锚标记）居中，可以设置css属性text-align：center;到你的。

* {
    margin: 0;
    padding: 0;
}

header {
  width: 100%;
  height: 81px;
  background: #669999;
  line-height: 81px;
}

header nav {
  float: right;
  margin-right: 15%;
  background: green;
}

header nav ul {
  background: yellow;
  width: 650px;
  height: 81px;
  text-align: center;   /* center a tag  */
}

header nav li {
  display: inline-block;
  margin-left: 20px;
  width: 180px;
  height: 65px;          /* increase the height of li */
  background: #006666;
  margin-top: 20px;
  margin: auto;

}

header nav li a {
  background: red;
  margin: auto;
}

<!DOCTYPE html>
    <html lang="en">
        <head>
                <meta charset ="UTF-8"/>
                <title>Section 2: Javascript Language Basics</title>
            <link rel="stylesheet" href="style.css">
        </head>
        <body>
               
             <header>
        <nav>
            <ul>
                <li><a href="">About</a></li>
                <li><a href="">Works</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </nav>
    </header>   
        </body>
        
        
     </html>

链接垂直对齐问题

3 个答案: