在CSS中绘制空内联框？

Question

我确信这很简单,但我试图在HTML中绘制一组小的,空的内联框,如下所示:

<span style="border:1px solid black;height=10px;width=17px"></span>

早些时候,早期做了简单的.gif图像,但随着浏览器的显示放大或缩小,看起来很模糊.

<span>然而,作为内联元素并不尊重height和width属性.当然,使用<div style="display:inline;...展示相同的行为,因为它不会尊重这些属性.

你能建议一个CSS的方式吗？

---

更新 假设如下,如果我浮动它将绑定到文本的右侧或左侧,我需要根据浏览器的宽度内联到文本,&c

<p>Lorem ipsum dolor sit amet, <INSERT BOX HERE> consectetur adipisicing 
elit, <INSERT OTHER BOX HERE> sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>

Answer 1

height并且width只能应用于具有hasLayout属性的元素.默认情况下,SPAN元素不实现此属性.

因为内联块在所有主流浏览器上都无法正常工作,所以我建议使用padding-dimension技巧:

<span style="font-size:30px; padding-left:30px; background:red;">&nbsp;</span>

您可能需要对尺寸进行一点点因为全局font-size,font-family并且line-height可能会影响您的盒子的实际尺寸.

编辑: 绘制空框是我错过的一点,但我认为从我的代码来看它是非常明显的.如果没有,这是另一个例子:

<style type="text/css">
.box1 { font-size:15px; font-family:Tahoma; padding-left:15px; border:1px solid red; overflow:hidden; }
.box2 { font-size:10px; font-family:Tahoma; padding-left:15px; border:1px solid green; overflow:hidden; }
.box3 { font-size:5px; font-family:Tahoma; padding-left:5px; border:1px solid blue; overflow:hidden; }
</style>

This is red box: <span class="box1">&nbsp;</span> and this is green box: <span class="box2">&nbsp;</span>.
And this is another box, this time it is blue: <span class="box3">&nbsp;</span>.

此代码将此输出作为输出: alt text http://img413.imageshack.us/img413/5865/boxes.png

而且因为我们放入 每个范围,这个技巧将适用于所有浏览器.

Answer 2

你可以试试css display参数inline-block.但是你的里程数因此而异.

display: inline-block

内联块以内联方式放置(即与相邻内容在同一行上),但它表现为块.