时间戳

首页 > 解决方案 > CSS 列表格式菜单 - 当图像在列表中时，菜单项向下移动

css - CSS 列表格式菜单 - 当图像在列表中时，菜单项向下移动

问题描述

我在导航栏中格式化 img 时遇到问题 - 在下面的代码段中，navitem 很好地并排排列，直到我在 .navitem li 中插入图像。然后由于某种原因，我不明白下一个导航项目以某种方式向下移动。

有人可以解释我为什么吗？我知道我可能可以使用 flex 或 table 布局来使其工作，我只是想了解它为什么会这样显示。

我本来预计，导航的高度和行高= 80px，图像大小= 80px，所有东西都会垂直居中排列。

.nav {
  width: 100vw;
  height: 80px;
  line-height:80px; 
  vertical-align: middle; 
}

.navitem {
  height: 80px;
  display: inline-block;
  width: auto;
  margin-left: 2em;
  padding: 0; 
  border: solid 1px;
  border-color: red;
}
<!DOCTYPE html>
<html>
  <head>
    <title>CSS List Problem</title>
  </head>
  <body>
    <nav class="nav"> 
      <ul>
        <li class="navitem"><img src="https://dummyimage.com/80x80/000/fff"/> </li>
        <li class="navitem">Hello</li>
        <li class="navitem">World</li>
      </ul>
    </nav>
    <h1>Hello World!</h1>
  </body>
</html>

标签： csshtml-lists

解决方案

正如 Paulie_D 在他的评论中指出的那样，我将 vertical-align 放在父元素而不是 li 元素本身上。嗯......是的......没有人说没有愚蠢的问题;-)

.nav {
  width: 100vw;
  height: 80px;
  line-height:80px; 
}

.navitem {
  height: 80px;
  display: inline-block;
  width: auto;
  margin-left: 2em;
  padding: 0; 
  border: solid 1px;
  border-color: red;
  vertical-align: middle;
}
<!DOCTYPE html>
<html>
  <head>
    <title>CSS List Problem</title>
  </head>
  <body>
    <nav class="nav"> 
      <ul>
        <li class="navitem"><img src="https://dummyimage.com/80x80/000/fff"/> </li>
        <li class="navitem">Hello</li>
        <li class="navitem">World</li>
      </ul>
    </nav>
    <h1>Hello World!</h1>
  </body>
</html>

推荐阅读