Html 在 CSS 中绘制空的内联框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1750526/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drawing empty inline boxes in CSS?
提问by Jé Queue
I'm sure this is very simple, but I'm trying to draw a set of small, empty, inlineboxes in HTML like the following:
我确定这很简单，但我正在尝试在 HTML 中绘制一组小的、空的、内联的框，如下所示：
<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.
早些时候，做了简单的 .gif 图像，但随着浏览器的显示放大或缩小，看起来很模糊。
<span>however being an inline element does not honor the heightand widthproperties. And of course using <div style="display:inline;...exhibits the same behavior in that it then won't honor those properties.
<span>然而，作为内联元素并不尊重height和width属性。当然， using<div style="display:inline;...表现出相同的行为，因为它不会尊重这些属性。
Can you please suggest a CSS'y way?
你能建议一个CSS'y方式吗？
Update更新假设以下内容，如果我浮动它，它将绑定到文本的右侧或左侧，我需要根据浏览器的宽度将其内联到文本中，&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>
回答by rochal
heightand widthcan only be applied to elements with hasLayoutproperty. SPAN element by default does not implement this property.
height并且width只能应用于具有hasLayout属性的元素。默认情况下，SPAN 元素不实现此属性。
Because inline-block does not work correctly on all major browsers I would recommend using padding-dimension trick:
因为 inline-block 在所有主要浏览器上都不能正常工作，所以我建议使用 padding-dimension 技巧：
<span style="font-size:30px; padding-left:30px; background:red;"> </span>
You might need to play a little bit with dimensions because global font-size, font-familyand line-heightcan affect the real size of your box.
您可能需要发挥一点点，尺寸，因为全球性font-size，font-family并line-height会影响你的盒子的实际尺寸。
Edit:Drawing empty boxesis 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"> </span> and this is green box: <span class="box2"> </span>.
And this is another box, this time it is blue: <span class="box3"> </span>.
And this code produces this as an output: alt text http://img413.imageshack.us/img413/5865/boxes.png
这段代码将其作为输出生成： alt text http://img413.imageshack.us/img413/5865/boxes.png
And because we put inside every span, this trick will work on all browsers.
而且因为我们把 每个跨度都放在里面，所以这个技巧适用于所有浏览器。
回答by Jordan S. Jones
You could try out the css display parameter inline-block. But your mileage my vary with this one.
您可以尝试使用 css display 参数inline-block。但是你的里程我因这个而异。
display: inline-block
display: inline-block
An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.
内联块被内联放置（即与相邻内容在同一行上），但它的行为就像一个块。
回答by JasonWyatt
You could use display: inline-block. Though this won't work in old browsers like IE 6.
你可以使用display: inline-block. 尽管这在 IE 6 等旧浏览器中不起作用。
Depending on where you want the items located, you could do display:block; float:[left or right]
根据您想要放置物品的位置，您可以这样做 display:block; float:[left or right]
回答by Funka
Lots of good suggestions on this page. I'm wondering, though, when you tried using a GIF, was the border part of your graphic?
这个页面上有很多很好的建议。不过，我想知道，当您尝试使用 GIF 时，您的图形的边框部分是？
How about using a transparent 1x1 gif that you can size with CSS, then apply border:1px solid blackto the image. If you tried incorporating the border as part of the image, I understand stretching it would cause it to look fuzzy. But a transparent GIF with a CSS border should look nice enough, unless you had some other styling you needed on it...
如何使用透明的 1x1 gif，您可以使用 CSS 调整大小，然后应用于border:1px solid black图像。如果您尝试将边框合并为图像的一部分，我知道拉伸它会导致它看起来模糊。但是带有 CSS 边框的透明 GIF 看起来应该足够好了，除非你有其他一些你需要的样式......
Good luck!
祝你好运！
回答by deargle
Other people's answers have included the correct inline style syntax, but I thought I'd point it out explicitly:
其他人的答案包括正确的内联样式语法，但我想我会明确指出：
Your original style rules look like this:
您的原始样式规则如下所示：
<span style="border:1px solid black;height=10px;width=17px"></span>
That shouldlook like this:
那应该是这样的：
<span style="border:1px solid black;height:10px;width:17px"></span>
The equals signs don't belong in css syntax like that, colons are what is needed there.
等号不属于这样的 css 语法，那里需要冒号。
That, along with display:inline-blockon the span, as other people suggested, worked for me. Like this:
也就是说，随着display:inline-block上跨度，因为其他人建议，为我工作。像这样：
<span style="border:1px solid black;height:10px;width:17px;display:inline-block;"></span>
回答by jeroen
You are right, spandoes not honour width and height, however, it does sort of honour padding.
你是对的，跨度不尊重宽度和高度，但是，它确实有点尊重填充。
You can set the width of your box easily giving it a left and / or right padding.
您可以轻松设置框的宽度，为其提供左和/或右填充。
The height is a bit trickier as an empty span seems to have a height so you need to set the font-size to 0.
高度有点棘手，因为空跨度似乎具有高度，因此您需要将字体大小设置为 0。
span.box {
padding: 5px 8px; // height 10, width 16
font-size: 0px;
}
And of course it does not work in IE7 (and probably IE6), at least in IE7 compatibility mode the box magically disappears when it's empty and doesn't show the bottom border when I put a non-breaking space in it (which messes up the width anyway)...
当然，它在 IE7（也可能是 IE6）中不起作用，至少在 IE7 兼容模式下，该框在为空时神奇地消失，并且当我在其中放置一个不间断的空格时不显示底部边框（这搞砸了）宽度无论如何）...
回答by Inyoka
Don't quite understand your update, but in general to draw a set of small, empty, inline boxes in HTML a table would be the easiest method so I'll leave this here incase it helps.
不太了解您的更新，但一般来说，在 HTML 中绘制一组小的、空的、内联的框是最简单的方法，所以我将把它留在这里以防万一它有帮助。
Simply define the table ...
只需定义表...
<table>
<tr>
<td id=one></td><td id=two></td><td id=three></td>
</tr>
</table>
Then format the table data using your .css like so ...
然后使用您的 .css 格式化表格数据，就像这样......
tr{ height: 60px;}
th, td{ width: 100px;}
#one{ border:10px solid blue;}
#two{ border:10px solid red;}
#three{ border:10px solid green;}
Depending one how you want the text positioned, un-formatted table cells might be appropriate as well. Hope this helps.
根据您希望文本定位的方式，未格式化的表格单元格也可能是合适的。希望这可以帮助。
回答by andyface
I believe this works.
我相信这有效。
<span style="display:inline-block;border:1px solid #00ff00;width:150px;height:50px;"></span>
pretty sure that'll work cross-browser
很确定这会跨浏览器工作
回答by neuront
It seems that width: 17pxdoesn't work on inline or inline-block elements. But in turn why not make tricks on block elements and let them shows as inline elements via float: left?
这似乎width: 17px不适用于内联或内联块元素。但是反过来为什么不在块元素上做一些技巧，让它们通过 显示为内联元素float: left？
This is what I have tried:
这是我尝试过的：
<html>
<head>
<style>
.container div {
float: left;
height: 20px;
}
</style>
</head>
<body>
<div class='container'>
<div style='width: 20px; border: 1px solid red;'></div>
<div>Text</div>
<div style='width: 20px; border: 1px solid red;'></div>
</div>
<div style='clear: both'></div>
回答by chelmertz
How about
怎么样
<div>
<div style="border: 1px solid #000; height: 10px; width: 17px; float: left"></div>
<div style="border: 1px solid #000; height: 10px; width: 17px; float: left"></div>
<br style="clear: both;" />
</div>
