텍스트의 특정 문자에 대한 경계가있는 상자를 만드는 방법은 무엇입니까?

Question

텍스트 안에 "+"문자가 있고 경계가있는 상자에 넣으려는 경우 span에 포장하고 border: solid 1px으로 설정하면됩니다. 그러나 0.5em by 0.5em과 같이 상자의 특정 치수를 갖고 싶다면 어떻게해야합니까? 기본적으로 span은 인라인이므로 width 및 height은 무시됩니다.

나는 display: inline-box을 설정하는 것이 도움이 될 것이라고 생각했지만, 테두리가 이상하게 그려져 문자가 상자에 전혀 나타나지 않으며 브라우저마다 다르게 나타납니다. http://jsfiddle.net/csMLu/

요소에 설정해야 할 것이 있습니까? 아니면 더 나은 기본 접근법이 있습니까?

Answer 1

line height 및 text-align이 작동하도록 보인다 설정 스타일을 설정하면 잘 작동은, 그러나 0.5em 용기입니다 설정했다 작은 텍스트로.

.box05 { 
 
    height: .5em; 
 
    width: .5em; 
 
    line-height: .5em; 
 
    font-size: .9em /* smaller then the others */ 
 
} 
 

 
.box06 { 
 
    height: .6em; 
 
    width: .6em; 
 
    line-height: .6em; 
 
} 
 

 
.box07 { 
 
    height: .7em; 
 
    width: .7em; 
 
    line-height: .7em; 
 
} 
 

 
.box08 { 
 
    height: .8em; 
 
    width: .8em; 
 
    line-height: .8em; 
 
} 
 

 
.box09 { 
 
    height: .9em; 
 
    width: .9em; 
 
    line-height: .9em; 
 
} 
 

 

 
p { margin: 1em; } 
 
span { border: solid #444 1px; text-align: center; display: inline-block; }

<p>Use the <span class="box05">+</span> button! 
 

 
<p>Use the <span class="box06">+</span> button! 
 
    
 
<p>Use the <span class="box07">+</span> button! 
 
    
 
<p>Use the <span class="box08">+</span> button! 
 
    
 
<p>Use the <span class="box09">+</span> button!

Answer 2

당신에게 잘못된 클래스를

인라인 블록에

http://jsfiddle.net/csMLu/15/