我试图在 <li>
之间放置一条灰色水平细线水平导航栏上的元素以提供元素之间的连接感知。代码如下所示。如何在这些元素之间添加一条简单的线?
ul {
display: flex;
align-items: stretch; /* Default */
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0;
}
li {
display: block;
flex: 0 1 auto; /* Default */
list-style-type: none;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
最佳答案
这是在每个 li
之间运行的行的示例。
- 将
position: relative
添加到ul
使其成为:after
元素的父元素 - 位置
:after
使用垂直平移在字符的垂直中间 - 为
li
提供z-index
和background-color
以便它们保持在灰线的“顶部”
ul {
display: flex;
align-items: stretch; /* Default */
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
li {
display: block;
flex: 0 1 auto; /* Default */
list-style-type: none;
background-color: white;
padding: 0 0.75em;
z-index: 1;
}
li:first-child {
padding-left: 0;
}
li:last-child {
padding-right: 0;
}
ul:after {
content: '';
border-bottom: 1px solid lightgray;
position: absolute;
transform: translateY(-50%);
top: 50%;
width: 100%;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
关于html - 之间有线的水平列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54657249/