我确信这很简单,但我试图在
HTML中绘制一组小的,空的内联框,如下所示：
<span style="border:1px solid black;height=10px;width=17px"></span>
早些时候,之前做过简单的.gif图像,但随着浏览器的显示放大或缩小,看起来很模糊.
<跨度>但是,内联元素不支持高度和宽度属性.当然使用< 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>
解决方法
高度和宽度只能应用于具有hasLayout属性的元素.默认情况下,SPAN元素不实现此属性.
因为内联块在所有主流浏览器上都无法正常工作,所以我建议使用padding-dimension技巧：
<span style="font-size:30px; padding-left:30px; background:red;"> </span>
您可能需要使用尺寸进行一些操作,因为全局字体大小,字体系列和行高会影响您的框的实际大小.
编辑：
绘制空盒子是我错过的,但我认为无论如何我的代码都很明显.如果没有,这是另一个例子：
<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"> </span> and this is green Box: <span class="Box2"> </span>. And this is another Box,this time it is blue: <span class="Box3"> </span>.
并且此代码将此作为输出生成：
alt text http://img413.imageshack.us/img413/5865/boxes.png
而且因为我们把& nbsp;在每个范围内,这个技巧将适用于所有浏览器.
