如何绘制图标周围的水平线？

问题描述：

我想用下面的代码在图标的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>

你为什么不只是使用的边界？边界顶部和边界底部？ – 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>

答

这是更好地去除<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>

预览

如何绘制图标周围的水平线？

相关推荐