如何排列li元素并消除导航栏（navbar）中li元素间的空白间隙？

嘿，我帮你搞定这个导航栏的间隙问题！你现在的li元素之间有空白，主要是浏览器默认样式和布局设置导致的，我给你调整后的代码和详细说明：

问题分析 #

你当前的代码存在几个关键问题：

• ul和li元素默认带有margin、padding和列表样式，这些会产生间隙
• .test类使用display: unset可能导致布局上的空白（比如inline元素的换行空格）
• 没有对.list容器和内部li元素做统一的样式重置

修改后的完整代码 #

CSS 样式

<head>
  <style>
    /* 全局重置ul和li的默认样式，消除浏览器自带间隙 */
    ul, li {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    /* 导航列容器样式 */
    .test{
      margin: 0;
      width: 20.65%;
      padding: 0;
      height: max-content;
      display: inline-block;
      vertical-align: top;
      white-space: normal; /* 取消nowrap，让链接正常换行 */
      font-size: 16px;
    }

    /* 外层容器：消除inline-block元素之间的换行空白 */
    .nav-container {
      font-size: 0;
    }

    /* 链接列表容器 */
    .list {
      margin: 0;
      padding: 0;
    }

    /* 列表项样式：彻底消除间隙 */
    .list li {
      width: 100%;
      margin: 0;
      padding: 0;
    }

    /* 链接样式：让点击区域更友好，可按需调整内边距 */
    .list li a {
      display: block;
      padding: 6px 0; /* 可选：添加内边距提升点击体验，不需要可设为0 */
    }

    .text-right {
      text-align: right;
    }

    .text-bold {
      font-weight: bold;
      display: block; /* 让标题独占一行 */
      margin-bottom: 8px; /* 标题和链接之间的间距，按需调整 */
      font-size: 16px;
    }
  </style>
</head>

HTML 结构

<div class="nav-container">
  <ul class="test">
    <a class="text-bold" href="#">title</a>
    <ul class="list">
      <li class="text-right"><a href="#">test linkss</a></li>
      <li class="text-right"><a href="#">test link</a></li>
      <li class="text-right"><a href="#">test link</a></li>
      <li class="text-right"><a href="#">test link</a></li>
      <li class="text-right"><a href="#">test link</a></li>
      <li class="text-right"><a href="#">test link</a></li>
      <li class="text-right"><a href="#">test link</a></li>
      <li class="text-right"><a href="#">test link</a></li>
      <li class="text-right"><a href="#">test link</a></li>
      <li class="text-right"><a href="#">test link</a></li>
    </ul>
  </ul>
  <ul class="test">
    <a class="text-bold" href="#">title1</a>
    <ul class="list">
      <li class="text-right"><a href="#">test linkss</a></li>
      <li class="text-right"><a href="#">test link</a></li>
      <li class="text-right"><a href="#">test link</a></li>
      <li class="text-right"><a href="#">test link</a></li>
    </ul>
  </ul>
  <ul class="test">
    <a class="text-bold" href="#">title</a>
    <ul class="list">
      <li class="text-right"><a href="#">test linkss</a></li>
      <li class="text-right"><a href="#">test link</a></li>
    </ul>
  </ul>
  <ul class="test">
    <a class="text-bold" href="#">title</a>
    <ul class="list">
      <li><a href="#">test linkss</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
    </ul>
  </ul>
  <ul class="test">
    <a class="text-bold" href="#">title</a>
    <ul class="list">
      <li><a href="#">test linkss</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
    </ul>
  </ul>
  <ul class="test">
    <a class="text-bold" href="#">title</a>
    <ul class="list">
      <li><a href="#">test linkss</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
    </ul>
  </ul>
  <ul class="test">
    <a class="text-bold" href="#">title</a>
    <ul class="list">
      <li><a href="#">test linkss</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
      <li><a href="#">test link</a></li>
    </ul>
  </ul>
</div>

关键改动说明 #

• 全局样式重置：清除ul和li的默认margin、padding和列表样式，从根源消除浏览器自带的间隙
• 布局优化：用inline-block实现导航列的横向排列，通过外层容器的font-size:0消除列之间的换行空白；如果更喜欢现代布局，也可以把.nav-container改成display:flex，不需要font-size:0的技巧
• 列表项样式：给li设置margin:0;padding:0，确保项与项之间完全无间隙；让a标签占满li的宽度，提升点击体验
• 移除冗余样式：删掉了不必要的!important声明和冲突的布局属性，避免样式混乱

这样调整后，你的导航栏li元素之间就不会有空白间隙了，完全符合你想要的效果！

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