如果我在文本中有一个字符(例如“ +”),并且希望将其放在带边框的框中,则可以将其包装在span中,然后设置border: solid 1px。但是,如果我希望为包装盒指定特定尺寸,例如0.5em x 0.5em,该怎么办?默认情况下,span是内联的,因此将忽略widthheight

我以为设置display: inline-box会有所帮助,但这似乎导致以奇怪的方式绘制边框,从而使字符根本不在框中,并且在不同的浏览器中也有所不同。见http://jsfiddle.net/csMLu/

我需要在元素上设置一些东西,还是有更好的基本方法?

最佳答案

设置line heighttext-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!

10-05 20:55
查看更多