这是我的问题
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>
列表如上。
最佳答案
实际上你正面临着一个继承的问题。在标题上定义 line-height
时,它会被 li
和 a
继承。 li
是一个 inline-block
元素,它的高度由您添加的固定高度定义(或者默认情况下其内容的高度)
a
元素是一个内联元素,它的高度由它的 line-height 定义(继承自 li
),逻辑上你会有一个溢出,因为它会大于 li
(81px > 36px)
的高度。如果您从 li
中移除固定高度,它的高度将等于 81px
,这是其内容 a
的高度。
为了避免这种情况,您只需通过将 li
的 line-height
设置为 initial
来移除继承( a
也将继承它)并删除固定高度:
* {
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;
}
<header>
<nav>
<ul>
<li><a href="">About</a></li>
<li><a href="">Works</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
关于html - 链接垂直对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50783637/