如何把这个短划线元素之间的李的

Question

我希望这个红色的短划线之间的第一和第二（和第二和第三）“李”平均位于此列表中，但它出现在它上面，而不是在左侧。这样做有可能吗？这里的例子：

http://codepen.io/anon/pen/ENzXao

这就是我试图完成：http://sketchtoy.com/67757539

.main__headers--info ul li { 
    font-size: 20px; 
    list-style: none; 
    display: inline-block; 
    font-weight: bold; 
} 

.main__headers--info ul li:nth-child(2), 
.main__headers--info ul li:nth-child(3) { 
    margin-left: 50px; 
} 

.main__headers--info ul li:nth-child(2)::before { 
    content: ""; 
    display: block; 
    border: 1px solid red; 
    width: 50px; 
} 

<div class="main__headers--info"> 
    <ul> 
    <li>lorem lorem</li> 
    <li>lorem ipsum</li> 
    <li>something</li> 
    </ul> 
</div> 

Answer 1

我会删除边缘，只是添加inline-block的伪元素：

.main__headers--info > ul > li { 
 
    font-size: 20px; 
 
    list-style: none; 
 
    display: inline-block; 
 
    font-weight: bold; 
 
} 
 
.main__headers--info > ul > li:not(:first-child)::before { 
 
    content: ""; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    border: 1px solid red; 
 
    width: 50px; 
 
}

<div class="main__headers--info"> 
 
    <ul> 
 
    <li>lorem lorem</li> 
 
    <li>lorem ipsum</li> 
 
    <li>something</li> 
 
    </ul> 
 
</div>

请参阅How to remove the space between inline-block elements?如果伪元素之前的空格令您恼火。

Answer 2

我已经修改了笔。

这里是演示如果我正确地得到您的问题。

这个CSS代码添加到第二和第三李时珍：元素

position: absolute; 
    left: 0; 
    width: 100%; 

和position: relative李元素 Codepen

Answer 3

在这里，工作示例之前，将把红线任何锂元素不是第一个。

.main__headers--info ul li { 
 
    font-size: 20px; 
 
    list-style: none; 
 
    display: inline-block; 
 
    font-weight: bold; 
 
} 
 

 
.main__headers--info ul li:nth-child(2), 
 
.main__headers--info ul li:nth-child(3) { 
 
    margin-left: 50px; 
 
} 
 

 
.main__headers--info ul li:not(:first-of-type)::before { 
 
    content: ""; 
 
    display: block; 
 
    border: 1px solid red; 
 
    width: 50px; 
 
}

<div class="main__headers--info"> 
 
    <ul> 
 
    <li>lorem lorem</li> 
 
    <li>lorem ipsum</li> 
 
    <li>something</li> 
 
    </ul> 
 
</div>

Answer 4

.wrapper { 
 
    display: flex; 
 
    margin: 0 auto; 
 
    padding: 0 30px; 
 
    width: 100%; } 
 

 
.seperator { 
 
    flex-grow: 1; 
 
    flex-shrink: 0; 
 
    margin: 0 1px; 
 
    margin-top: 0 !important; } 
 
    .seperator hr { 
 
    height: 2px; 
 
    background: gray; 
 
    border: none; 
 
    vertical-align: middle; }

<div class="wrapper"> 
 
    <div class=""> 
 
     Text 
 
    </div> 
 

 
    <div class="seperator"><hr></div> 
 

 
    <div class=""> 
 
     Text 
 
    </div> 
 

 
    <div class="seperator"><hr></div> 
 

 
    <div class=""> 
 
     Text 
 
    </div> 
 
</div>