css - 对齐列表

Question

我知道这个问题是什么意思，比如我希望有人给我提供代码，因为我懒得搜索。好吧，不是。

我试图让菜单看起来像这样： 而我似乎无法获得这种效果。

我希望图片是内联的，因此文字不会隐藏在它后面，但我希望它是动态的 - 我想这样做，即使我没有6，图像仍保持有序我的列表中的元素，我希望图像始终存在。除此之外，图像几乎描述了我想要的东西。我现在得到的只有：

现在，我得到的是： 这不是我想要的。它没有响应，就像我的例子，你可能有5个项目（不同的大小是一个选项），但图像仍然居中。我怎样才能做到这一点？

编辑：我稍微更新了代码，现在蓝丝带条现在位于图像的中间位置。 有没有更好的方法，而不是定义px。？

我的代码已托管here！请查看。

提前致谢，NonameSL

Answer 1

如果您想垂直对齐项目，也可以使用Flexbox。

笔：http://codepen.io/tomanagle/pen/zBgdAX

<nav>
<ul>
  <li>List item 1</li>
  <li>A quite longer list item</li>
  <li>An extremely long list item makes the logo un-centered.</li>
  <li><img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/English_Pok%C3%A9mon_logo.svg
   "></li>
  <li>Shorter</li>
  <li>List</li>
  <li>Items</li>
</ul>
  </nav>

CSS：

nav > ul{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

nav > ul > li{
  float: left;
  padding: 1rem 2rem;
  width: 100%;
  max-width: 12rem;
}
nav > ul > li > img{
  max-width: 100%;
}

Answer 2

在第26行的test2.html文件中进行以下更改我想到了这个文件：

div#menu ul li a {
    background-color: #f8fad4;
    border-color: #136866;
    border-radius: 4px 4px 0 0;
    border-style: solid;
    color: #555533;
    font-weight: bold;
    text-decoration: none;

    //new changes
    white-space: nowrap;
    width: 120px;
    overflow: hidden;
    display: inline-block;
}

Answer 3

最终我想出了这个非常相似的代码。将其添加到div#menu ul li a：

width:100px;
display: inline-block;

如果有一个奇数个列表项，只需向较小的一侧添加一个visibility: hidden;空元素。