在CSS中绘制空行内框？ [英] Drawing empty inline boxes in CSS?

问题描述

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

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

早些时候，之前的简单的.gif图片看起来模糊，浏览器的显示比例放大或缩小。

< span> 但是作为内联元素不支持 height 和 width 属性。当然，使用< div style =display：inline; ... 展示相同的行为，因为它不会遵守这些属性。

$

---

更新
假设如下，如果我float它将绑定到文本的右边或左边，我需要它的内联的文本基于浏览器的宽度，& c

 < p> Lorem ipsum dolor sit amet，< INSERT BOX HERE> consectetur adipisicing 
 elit，< INSERT OTHER BOX HERE> sed do eiusmod tempor incididunt 
  

h2_lin>解决方案

height 和 width

因为inline-block在所有主流浏览器上都无法正常工作，我建议使用padding-dimension trick：

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

有一点尺寸，因为全局 font-size ， font-family 和

编辑：
绘制空白框

是我错过的位，但我认为从我的代码反正很明显，如果不是，这是另一个例子：

 < 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> 
 
这是红色框：< span class =box1>& nbsp;< / span>，这是绿色框：< span class =box2>& nbsp; ，这一次是蓝色：< span class =box3>& nbsp;< / span> ;. 
  

这段代码生成一个输出：

因为我们把& nbsp ; 在每个span内，这个技巧将在所有浏览器上工作。

I'm sure this is very simple, but I'm trying to draw a set of small, empty, inline boxes in HTML like the following:

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

Earlier, did simple .gif images earlier but looked fuzzy as the browsers' displays are scaled up or down.

<span> however being an inline element does not honor the height and width properties. And of course using <div style="display:inline;... exhibits the same behavior in that it then won't honor those properties.

Can you please suggest a CSS'y way?

---

Update Assume the following, if I float it it will bond to the right or left of the text and I need it inlined to the text based upon the browser's width, &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 and width can only be applied to elements with hasLayout property. SPAN element by default does not implement this property.

Because inline-block does not work correctly on all major browsers I would recommend using padding-dimension trick:

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

You might need to play a little bit with dimensions because global font-size, font-family and line-height can affect the real size of your box.

Edit: Drawing empty boxes is the bit I missed, but I think it is quite obvious from my code anyway. If not, this is another example:

<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>.

And this code produces this as an output:

And because we put   inside every span, this trick will work on all browsers.

这篇关于在CSS中绘制空行内框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！