如果我在文本中有一个字符(例如“ +”),并且希望将其放在带边框的框中,则可以将其包装在span
中,然后设置border: solid 1px
。但是,如果我希望为包装盒指定特定尺寸,例如0.5em x 0.5em,该怎么办?默认情况下,span
是内联的,因此将忽略width
和height
。
我以为设置display: inline-box
会有所帮助,但这似乎导致以奇怪的方式绘制边框,从而使字符根本不在框中,并且在不同的浏览器中也有所不同。见http://jsfiddle.net/csMLu/
我需要在元素上设置一些东西,还是有更好的基本方法?
最佳答案
设置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!