Html 对齐定位标记内的文本并设置其样式

我有一个链接列表，我想为导航结构一个一个堆叠在另一个之上。这是我的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），并在其正下方显示名称（1）

但是由于某种原因，这个名字被推到了下面，进入下一个锚标签

你可以看到我这里有什么：

---

有人知道我如何解决这个问题吗？

问题是您已经为li标记设置了“行高”。请记住，行高度将影响该容器内的所有行，而不是容器高度。。因此，当您添加它时，两行中的每一行（代码、名称）都被向下推

因此，我删除了

行高度

。我还从.code中删除了

height:100%

，这样.name就会更靠近它，并为.code设置了padding top以将两者推向中心

nav{
显示：块；
排名：0；
左：0；
身高：100%；
位置：固定；
宽度：150px；
颜色：#000000；
右边框：实心2px#000000；
背景色：#FFFFFF；
}
美国海军，
李国荣{
保证金：0；
填充：0；
}
李国荣{
高度：150像素；
边框底部：实心2px#000000；
}
nav ul li a：链接，
导航李a：悬停，
李娜：参观了{
显示：块；
颜色：#000000；
文字装饰：无；
宽度：150px；
}
nav ul li a span.code{
填充顶部：15px；
显示：内联块；
字体大小：72px；
宽度：100%；
文本对齐：居中；
}
nav ul li a span.name{
显示：内联块；
字体大小：20px；
宽度：100%；
高度：40px；
文本对齐：居中；
}

问题在于您已经为li标记设置了“行高”。请记住，行高度将影响该容器内的所有行，而不是容器高度。。因此，当您添加它时，两行中的每一行（代码、名称）都被向下推

因此，我删除了

行高度

。我还从.code中删除了

height:100%

，这样.name就会更靠近它，并为.code设置了padding top以将两者推向中心

nav{
显示：块；
排名：0；
左：0；
身高：100%；
位置：固定；
宽度：150px；
颜色：#000000；
右边框：实心2px#000000；
背景色：#FFFFFF；
}
美国海军，
李国荣{
保证金：0；
填充：0；
}
李国荣{
高度：150像素；
边框底部：实心2px#000000；
}
nav ul li a：链接，
导航李a：悬停，
李娜：参观了{
显示：块；
颜色：#000000；
文字装饰：无；
宽度：150px；
}
nav ul li a span.code{
填充顶部：15px；
显示：内联块；
字体大小：72px；
宽度：100%；
文本对齐：居中；
}
nav ul li a span.name{
显示：内联块；
字体大小：20px；
宽度：100%；
高度：40px；
文本对齐：居中；
}

您只需从

li

样式中删除

线条高度

您只需从
li
样式中删除
线条高度