带有图像和分隔符的完全对齐的水平菜单

Question

我想实现这个完全对齐的水平菜单：

​

对齐是用flexbox和works完成的，但我不能让分隔的中间点也对齐；它们是通过伪类使用css-content来实现的。此外，我想知道是否有更好的方法来垂直居中项目，而不是通过添加填充来伪造它，就像我做的那样。

下面是我的代码和fiddle

​

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}
li.home {
  padding: 0;
}
li {
  vertical-align: middle;
  padding-top: 10px;
}
nav {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  height: 40px;
}
li::after {
  //padding: 0em 0.4em;
  content: '\00b7';
  pointer-events: none;
}
li.home::after,
li.last::after {
  content: none;
  text-align: justify;
}

<nav id="main-menu">
  <ul>
    <li class="home">
      <a href="/de"><img src="http://dummyimage.com/40x40/000/fff"></a>
    </li>
    <li class="second"><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">One more Item</a></li>
    <li><a href="#">Another Item</a></li>
    <li class="last"><a href="#">Contact</a></li>
  </ul>
</nav>

​

Answer 1

​

body { margin: 0; }                              /* 1 */

nav {
  height: 40px;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
}

ul {
    display: flex;
    justify-content: space-between;              /* 2 */
    align-items: center;                         /* 2 */
    height: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

li:not(.home) {
    flex: 1;                                      /* 3 */
    height: 100%;
    border: 1px dashed red;                       /* 4 */
    background-color: lightgreen;                 /* 4 */
}

li:not(.home) > a {                               /* 5 */
    display: flex;                    
    justify-content: center;
    align-items: center;
    height: 100%;
}

li img { vertical-align: bottom; }                /* 6 */

li { position: relative; }                        /* 7 */

li:not(.home):not(:last-child)::before {          /* 8 */
    position: absolute;
    content: '\26AB';                             /* 4 */
    left: 100%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
    pointer-events: none;        
}

<nav id="main-menu">
  <ul>
    <li class="home">
      <a href="/de"><img src="http://dummyimage.com/40x40/000/fff"></a>
    </li>
    <li class="second"><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">One more Item</a></li>
    <li><a href="#">Another Item</a></li>
    <li class="last"><a href="#">Contact</a></li>
</ul>

​

jsFiddle

备注：

1. Remove default margins on body element
2. Methods for Aligning Flex Items
3. Consume all remaining space with flex-grow property
4. Borders，背景色和更大的项目符号仅用于说明目的仅flex properties
5. Remove baseline alignment使锚点元素能够完全覆盖列表项空间并将文本对齐(即，image)
6. Establish nearest positioned ancestor for absolute positioning
7. Use absolute positioning to align bullets

下的空白

Answer 2

您可以使用align-self: center;将项目垂直居中，但在我看来，使用:before或:after等伪元素无法实现点分隔符。

我建议对分隔符使用单独的<li>标记，如下所示：

请注意，您的图像元素需要display: block;才能具有适当的高度。

​

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}
img {
    display: block;
}
li.home {
  padding: 0;
}
li {
  align-self: center;
}
nav {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  height: 40px;
}

<nav id="main-menu">
  <ul>
    <li class="home">
      <a href="/de"><img src="http://dummyimage.com/40x40/000/fff"></a>
    </li>
    <li class="second"><a href="#">Item 1</a></li>
    <li class="separator">·</li>
    <li><a href="#">Item 2</a></li>
    <li class="separator">·</li>
    <li><a href="#">One more Item</a></li>
    <li class="separator">·</li>
    <li><a href="#">Another Item</a></li>
    <li class="separator">·</li>
    <li class="last"><a href="#">Contact</a></li>
  </ul>
</nav>

​

Fiddle version