아이콘 주위에 수평선을 그리는 방법은 무엇입니까?

다음 코드가있는 아이콘의 옆쪽에 두 개의 실선을 그리려합니다. 그러나 태그를 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

조상의 너비가 정의되지 않았으므로 '

'의 너비를 백분율 대신 단위 (예 : 100 픽셀)로 설정해야합니다. 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

아이콘 주위에 수평선을 그리는 방법은 무엇입니까?

답변

관련 문제