我确信这很简单,但我正尝试在 HTML 中绘制一组小的、空的、内联框,如下所示:
<span style="border:1px solid black;height=10px;width=17px"></span>
早些时候,制作了简单的 .gif 图像,但随着浏览器的显示按比例放大或缩小,看起来很模糊。
<span>
然而,作为内联元素并不符合 height
和 width
特性。当然还有使用 <div style="display:inline;...
表现出相同的行为,因为它不会遵守这些属性。
你能推荐一个 CSS 的方式吗?
更新 假设如下,如果我 float 它,它将绑定(bind)到文本的右侧或左侧,我需要根据浏览器的宽度将它内联到文本中,&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>
最佳答案
height
和 width
只能应用于具有 hasLayout 属性的元素。默认情况下,SPAN 元素不实现此属性。
因为内联 block 不能在所有主流浏览器上正常工作,我建议使用 padding-dimension 技巧:
<span style="font-size:30px; padding-left:30px; background:red;"> </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"> </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
因为我们将
放在每个 span 中,所以这个技巧适用于所有浏览器。
关于html - 在 CSS 中绘制空内联框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1750526/