Question

我在过去几天一直在学习flexbox并遇到问题。在my codepen example我有一个使用2个flexbox容器的导航。一个用于＆＃34; LOGO＆＃34;和＆＃34; UL＆＃34;行内布局和另一个内部＆＃34; LI＆＃34; ＆＃34; UL＆＃34;中的项目本身。

!!问题!!

当我在＆＃34; LI＆＃34;中使用文本时项目，徽标与导航中的第一项垂直对齐（在此示例中为＃34; HOME＆＃34;），这是好的。但是当我使用un或图像等unicode字符作为第一项时，它们将不会垂直对齐。

使用flexbox？在此示例中，文本与unicode字符或图像不同的原因是什么？我似乎无法找到如何正确对齐它们。

免责声明：这不是我的标志。我在google上找到了这个测试，因为我可以很容易地看到对齐。

Codepen link

HTML：

<nav>
  <div id="logo"><img src="https://s-media-cache-ak0.pinimg.com/originals/82/ff/89/82ff8976d30df8ac4d34526fbda80dac.gif">
  </div>
  <ul>
    <!--UNICODE VERSION (UNCOMMENT TO SEE ISSUE)
    <li>&#9776;</li>
    -->
    <!--IMG VERSION (UNCOMMENT TO SEE ISSUE)
    <li><img src="https://css-tricks.com/wp-content/uploads/2012/10/threelines.png"></li>
    -->
    <li>Home</li>
    <li>About</li>
    <li>Portfolio</li>
    <li>Contact</li>
  </ul>
</nav>

CSS：

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

nav #logo img {
  max-width: 200px;
}

nav ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

nav ul li {
  padding: 10px;
  text-transform: uppercase;
}

nav ul li img {
  max-width: 50px;
}

Answer 1

这就是你想要的吗？ Code Snippet

我刚刚将flex-direction更改为flex-direction: column;

如果这不是您想要的，请更好地描述它，也许是您想要的最终结果的绘图。

将导航中的图片/ Unicode字符与Flexbox中的文本对齐（html / css）

1 个答案: