Question

我有一个链接列表，我希望将一个链接堆叠在另一个上面以用于导航结构。这是我的HTML：

<nav>
  <ul>
    <li><a href="#"><span class="code">1</span><span class="name">One</span></a></li>
    <li><a href="#"><span class="code">2</span><span class="name">Two</span></a></li>
    <li><a href="#"><span class="code">3</span><span class="name">Three</span></a></li>
  </ul>
</nav>

每个列表项应该是正方形，并且它们都应垂直对齐。每个方块内的文本应该有大字体的数字（1），其下面有名称（一个）。

但由于某种原因，名称被推到下面，进入下一个锚标签。

您可以在此处查看我的内容：this answer

任何人都知道如何解决这个问题？

Answer 1

您只需要从line-height样式中删除li。

http://jsfiddle.net/pmb6pqea/4/

Answer 2

问题是你已经设置了'line-height＆＃39;对于li标签。记住，line-height将影响该容器内的所有行，而不是容器高度..所以当你添加它时 - 你所拥有的两行（代码，名称）中的每一行都被按下。

所以，我删除了line-height。我还从.code中移除了height:100%，以便.name将更接近它，并为.code设置padding-top以将两者都推到中心。

＆＃13;

nav {
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  position: fixed;
  width: 150px;
  color: #000000;
  border-right: solid 2px #000000;
  background-color: #FFFFFF;
}
nav ul,
nav ul li {
  margin: 0;
  padding: 0;
}
nav ul li {
  height: 150px;
  border-bottom: solid 2px #000000;
}
nav ul li a:link,
nav ul li a:hover,
nav ul li a:visited {
  display: block;
  color: #000000;
  text-decoration: none;
  width: 150px;
}
nav ul li a span.code {
  padding-top: 15px;
  display: inline-block;
  font-size: 72px;
  width: 100%;
  text-align: center;
}
nav ul li a span.name {
  display: inline-block;
  font-size: 20px;
  width: 100%;
  height: 40px;
  text-align: center;
}

＆＃13;

<nav>
  <ul>
    <li><a href="#"><span class="code">1</span><span class="name">One</span></a>
    </li>
    <li><a href="#"><span class="code">2</span><span class="name">Two</span></a>
    </li>
    <li><a href="#"><span class="code">3</span><span class="name">Three</span></a>
    </li>
  </ul>
</nav>

＆＃13;

在锚标记内对齐和样式文本

2 个答案: