文本在li中不是垂直对齐的

Question

我正在制作一个菜单，并且在文字方面出现问题并没有像我希望的那样出现。

以下是我遇到问题的屏幕截图。链接下方似乎有额外的空间 - 顶部和底部不相等。那里也没有填充物。它只是<li>中的一个链接。我有什么不对？

ul {
  list-style-type: none;
  height: 184px;
  text-align: right;
  padding: 0;
  font-weight: 300;
}
li {
  display: inline-block;
  width: 50%;
  text-align: left;
}
a:link, a:active {
  font-size: 16px;
  color: #000;
  text-decoration: none;
  -webkit-transition: background-color 0.3s, border-color 0.3s;
  transition: background-color 0.3s, border-color 0.3s;
  line-height: 2em;
}

a:hover {
    background-color: #adadad;
}
a {
  width: 100%;
  padding: 0 0.5em;
}

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

Answer 1

我认为没有问题。将您的CSS样式应用于A标签，而不是li。此外，为了清楚地看到发生了什么，我在每个标签周围放置了一个边框。看看小提琴，一切看起来都很好。如果不静态设置，DIV中的高度是自动的。也就是说，它看起来都很好，我看到下面提供的CSS没有多余的间距。

http://jsfiddle.net/4dbuuuq4/

<强> CSS

ul {
  list-style-type: none;
  height: 184px;
  padding: 0;
  font-weight: 300;
}
li a {
  display: inline-block;
  width: 50%;
  text-align: left;
    border:solid 1px #ccc;
}
li a:hover{
    cursor:pointer;
    background-color:#ccc;
    color:#fff;

}
a:link,
a:active {
  font-size: 16px;
  color: #000;
  text-decoration: none;
  -webkit-transition: background-color 0.3s, border-color 0.3s;
  transition: background-color 0.3s, border-color 0.3s;
}
a {
  width: 100%;
  padding: 0 0.5em;
}

Answer 2

您可以使用display: table-cell代替inline-block并使用height代替line-height上的a：

＆＃13;

＆＃13;

ul {
  list-style-type: none;
  height: 184px;
  text-align: right;
  padding: 0;
  font-weight: 300;
}
li {
  display: inline-block;
  width: 50%;
  text-align: left;
}
a:link,
a:active {
  font-size: 16px;
  color: #000;
  text-decoration: none;
  -webkit-transition: background-color 0.3s, border-color 0.3s;
  transition: background-color 0.3s, border-color 0.3s;
}
a:hover {
  background-color: #adadad;
}
ul li a {
  width: 100%;
  padding: 0 0.5em;
  display: table-cell;
  vertical-align: middle;
  height: 2em;
}

＆＃13;

<ul>
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">About</a>
  </li>
  <li><a href="#">Contact Us</a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;