如何繪製圖標周圍的水平線？

我想用下面的代碼在圖標的ech邊繪製兩條實線。但是，當我將li標籤顯示爲inline-block時，線條消失。如何繪製圖標周圍的水平線？

.icon-wrapper { 
 
    display: table; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin: -13px 0 0 -13px; 
 
    height: 26px; 
 
    width: 26px; 
 
    background-color: #fff; 
 
    border: 1px solid #aaa; 
 
    border-radius: 50%; 
 
    background-clip: padding-box; 
 
    text-align: center; 
 
} 
 
.center-icon ul li { 
 
    list-style: none; 
 
    display: inline-block; 
 
} 
 
.center-icon ul li hr { 
 
    border: 0; 
 
    border-top: 2px solid #8c8c8c; 
 
    text-align: center; 
 
    width: 45%; 
 
}

<div class="center-icon"> 
 
    <ul> 
 
    <li> 
 
     <hr> 
 
    </li> 
 
    <li><span class="icon-wrapper"><i class="fa fa-thumbs-up" aria-hidden="true"></i></span> 
 
    </li> 
 
    <li> 
 
     <hr> 
 
    </li> 
 
    </ul> 
 
</div>

來源

2016-06-08 user2326844

你爲什麼不只是使用的邊界？邊界頂部和邊界底部？ – Schleis

您需要在單元（例如100px）上設置'

'的寬度，而不是百分比，因爲沒有祖先具有定義的寬度。 https://jsfiddle.net/j08691/u4g1e35b/ – j08691

你可以用僞元素做到這一點。

html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*::before, 
 
*::after { 
 
    box-sizing: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    text-align: center; 
 
    padding: 1em; 
 
} 
 

 
.iconwrapper { 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 
.iconwrapper::before, 
 
.iconwrapper::after { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 2em; 
 
    height: 1px; 
 
    background: black; 
 
    vertical-align: middle; 
 
} 
 

 
.fa { 
 
border:1px solid black; 
 

 
    padding: .25em; 
 
    border-radius:50%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<span class="iconwrapper"><i class="fa fa-thumbs-up" aria-hidden="true"></i></span>

來源

2016-06-08 14:35:18

這是更好地去除<hr />並給予borders：

.icon-wrapper { 
 
    display: inline-block; 
 
    height: 26px; 
 
    width: 26px; 
 
    background-color: #fff; 
 
    border: 1px solid #aaa; 
 
    border-radius: 50%; 
 
    background-clip: padding-box; 
 
    text-align: center; 
 
    margin: -14px auto 0; 
 
    vertical-align: middle; 
 
} 
 
.center-icon ul li { 
 
    list-style: none; 
 
    display: inline-block; 
 
    border: 1px solid #8c8c8c; 
 
    border-width: 1px 0 0; 
 
    width: 75px; 
 
    height: 0px; 
 
    line-height: 0px; 
 
    text-align: center; 
 
}

Vertical 
 
<div class="center-icon"> 
 
    <ul> 
 
    <li> 
 
     <span class="icon-wrapper"><i class="fa fa-thumbs-up" aria-hidden="true"></i></span> 
 
    </li> 
 
    </ul> 
 
    <ul> 
 
    <li> 
 
     <span class="icon-wrapper"><i class="fa fa-thumbs-up" aria-hidden="true"></i></span> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
Horizontal 
 
<div class="center-icon"> 
 
    <ul> 
 
    <li> 
 
     <span class="icon-wrapper"><i class="fa fa-thumbs-up" aria-hidden="true"></i></span> 
 
    </li> 
 
    <li> 
 
     <span class="icon-wrapper"><i class="fa fa-thumbs-up" aria-hidden="true"></i></span> 
 
    </li> 
 
    </ul> 
 
</div>

預覽

來源

2016-06-08 14:28:10

如何繪製圖標周圍的水平線？

回答

相關問題