作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
对齐是用 flexbox 完成的并且可以工作,但我也无法对齐分隔的中点;它们是通过伪类使用 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>
最佳答案
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>
注意事项:
body
element flex-grow
property 关于html - 带有图像和分隔符的完全对齐的水平菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38805811/
我是一名优秀的程序员,十分优秀!