带有图像和分隔符的完全对齐的水平菜单 [英] Fully justified horizontal menu with image and separators

问题描述

我想实现这个完全合理的横向菜单：

调整是使用flexbox和工作，但我不能得到正确的分离中点;它们是通过使用css-content通过伪类生成的。此外，我想知道是否有一个更好的方法来垂直居中的项目，而不是通过添加一个填充，这样做它伪造它。

这是我的代码和小提示：

  ul {list-style：none; padding：0; margin：0;显示：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 =＃>第1项< / a>< / li> < li>< a href =＃>项目2< / a>< / li> < li>< a href =＃>一个项目< / a>< / li> < li>< a href =＃>另一个项目< / a>< / li> < li class =last>< a href =＃>联系< / a>< / li> < / ul>< / nav>  

解决方案

  body {margin：0; } / * 1 * / nav {height：40px; border-bottom：1px solid black; border-top：1px solid black;} ul {display：flex; justify-content：空格; / * 2 * / align-items：center; / * 2 * /身高：100％; list-style：none; padding：0; margin：0;} li：not（.home）{flex：1; / * 3 * /身高：100％; border：1px broken 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 * /左：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 =＃>第1项< / a>< / li> < li>< a href =＃>项目2< / a>< / li> < li>< a href =＃>一个项目< / a>< / li> < li>< a href =＃>另一个项目< / a>< / li> < / a>< / ul>  

/ div>

jsFiddle

注意：

1. 删除正文元素上的默认边距


2. 对齐Flex项目的方法


3. 使用 flex-grow 属性消耗所有剩余空间




5. 启用锚定元素以完全覆盖列表项空间并将文本与flex属性对齐


a href =http://stackoverflow.com/a/31445364/3597276>删除基线对齐（即图片下方的空白）

7. 建立绝对定位的最接近的祖先


8. 使用绝对定位来匹配项目符号

I would like to achieve this fully justified horizontal menu:

Justifying is done with flexbox and works, but I could not get the separating mid-dots justified, too; they are made by using css-content via pseudo-class. Also, I am wondering if there's a better way to vertically center the items than faking it by adding a padding as I have done it.

Here's my code and the 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>

解决方案

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

Notes:

1. Remove default margins on body element
2. Methods for Aligning Flex Items
3. Consume all remaining space with flex-grow property
4. Borders, background colors, and larger bullets for illustration purposes only
5. Enable anchor elements to fully cover list item space and align text with flex properties
6. Remove baseline alignment (i.e., whitespace underneath image)
7. Establish nearest positioned ancestor for absolute positioning
8. Use absolute positioning to align bullets

这篇关于带有图像和分隔符的完全对齐的水平菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！