导航栏<li>与<a>标签高度不匹配且无法居中问题求助

问题根源 #

原代码里<li>和<a>用了display: inline，这类行内元素不支持设置高度；同时<ul>自带默认内边距，会导致布局偏移，最终没法实现和<ul>等高以及文字居中的效果。

修改后的代码 #

CSS部分

body {
  padding: 0;
  margin: 0;
}

#navBox {
  display: flex;
  position: fixed;
  height: 12%;
  width: 100%;
  background-color: rgb(209, 10, 10);
  align-items: center;
}

img {
  width: 8%;
}

ul {
  display: flex; /* 改用flex布局，实现列表项横向排列 */
  list-style: none;
  height: 100%;
  border: 4px solid black;
  margin: 0; /* 移除默认外边距 */
  padding: 0; /* 移除默认内边距 */
}

ul li {
  display: flex; /* 改为flex，让a标签能占满li高度 */
  align-items: center; /* 实现文字垂直居中 */
  height: 100%;
  border: 4px solid black;
}

ul li a {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  text-decoration: none;
  color: black;
  padding: 0 50px; /* 简化padding写法 */
  border-right: 5px solid black;
  height: 100%;
  display: flex; /* 改为flex，确保高度生效并居中文字 */
  align-items: center;
}

HTML部分（无需修改）

<header>
  <div id="navBox">
    <img src="bj_image.png">
    <ul>
      <li><a href="#">Test 1</a></li>
      <li><a href="#">Test 2</a></li>
      <li><a href="#">Test 3</a></li>
      <li><a href="#">Test 4</a></li>
      <li><a href="#">Test 5</a></li>
      <li><a href="#">Test 6</a></li>
      <li><a href="#">Test 7</a></li>
    </ul>
  </div>
</header>

关键修改说明 #

• 把<ul>的display改成flex，既能实现列表项横向排列，又能更好地继承父容器的高度属性。
• 给<li>和<a>设置display: flex并添加align-items: center，既让元素支持高度设置，又能实现文字垂直居中。
• 移除<ul>默认的margin和padding，避免不必要的布局偏移。

内容的提问来源于stack exchange，提问作者DJKay