如何把這個短劃線元素之間的李的

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>