导航栏无法单行显示问题排查：display inline标签应如何使用？

先说说你代码里的几个明显问题： #

• HTML结构不规范：<ul>的直接子元素只能是<li>，你把<div class="link">直接塞在<ul>里不符合标准，得把它嵌套到<li>里，或者直接把<div>改成<li>。
• CSS选择器写错了：ul :hover 这里多了个空格，会把<ul>下所有子元素（包括那个图片容器）都触发hover效果，要精准控制导航项的话，得写成ul li:hover。
• 导航项默认换行：<li>是块级元素，默认占满一行，这就是导航栏没法单行显示的核心原因。
• animation属性用错了：animation: forwards; 单独写这个没用，forwards是动画填充模式，得配合动画名称、时长一起用。你这里只是hover时的颜色变化，用transition做平滑过渡更合适。

关于display: inline的正确用法： #

display: inline适合用在不需要独占一行、也不用设置宽高/垂直内外边距的行内元素上（比如<span>、<a>）。但导航项这种需要保持块级特性（比如要加padding、hover时的背景块）的元素，更推荐用display: inline-block——它既能让元素在一行排列，又支持设置宽高、margin、padding这些属性，比inline实用多了。

要是硬要用display: inline给<li>设置，那得注意：inline元素的垂直margin/padding不会生效，hover时的背景色只会裹着文字，不会形成块级的高亮区域，体验很差。

修正后的完整代码： #

CSS部分：

body {
  background-color: rgb(48, 32, 32);
}

.nav {
  background-color: rgb(46, 64, 80);
  color: aquamarine;
  opacity: 0.5;
  height: auto;
  text-align: center;
  padding: 10px 0; /* 加内边距让导航栏更舒展 */
}

ul {
  list-style: none; /* 去掉默认的列表圆点 */
  padding: 0; /* 清除默认内边距 */
  margin: 0; /* 清除默认外边距 */
  display: inline-block; /* 让ul在nav里居中，内部li正常排列 */
}

ul li {
  font-size: 8vh;
  display: inline-block; /* 核心：让li横向排列 */
  margin: 0 15px; /* 导航项之间加间距，避免挤在一起 */
  padding: 5px 10px; /* 加内边距，hover时高亮区域更合理 */
  transition: all 0.3s ease; /* hover效果平滑过渡 */
}

ul li:hover {
  background-color: brown;
  color: aquamarine;
}

/* 图片样式调整，和文字对齐 */
.link img {
  width: 5vh; /* 用vh单位和文字大小匹配，避免缩放变形 */
  vertical-align: middle; /* 和文字垂直居中对齐 */
}

HTML部分：

<body>
  <header>
    <div class="nav">
      <nav>
        <ul>
          <li class="link">
            <a href="#">
              <img src="sth.jpg" alt="somethin">
            </a>
          </li>
          <li>&#187;Home</li>
          <li>&#187;About</li>
          <li>&#187;Contact</li>
        </ul>
      </nav>
    </div>
  </header>
</body>

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