Question

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

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

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

<span>但是作为内联元素并不尊重height和width属性。当然，使用<div style="display:inline;...表现出相同的行为，因为它不会尊重这些属性。

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

<小时/> 的更新假设如下，如果我浮动它，它会粘合到文本的右边或左边，我需要根据浏览器的宽度内联到文本，＆amp; 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会影响您的尺寸的实际尺寸。

修改绘制空框是我错过的一点，但我认为无论如何我的代码都很明显。如果没有，这是另一个例子：

Answer 2

您可以试用css显示参数inline-block。但是你的里程数因此而异。

`display: inline-block`

内嵌块内联（即。与相邻内容在同一条线上），但它表现得像个街区。

Answer 3

您可以使用display: inline-block。虽然这在IE 6等旧浏览器中不起作用。

根据您希望项目所在的位置，您可以执行display:block; float:[left or right]

Answer 4

此页面上有很多好的建议。我想知道，当你尝试使用GIF时，你的图形的边界部分是什么？

如何使用可以使用CSS调整大小的透明1x1 gif，然后将border:1px solid black应用于图像。如果你尝试将边框合并为图像的一部分，我理解拉伸它会使它看起来模糊。但是带有CSS边框的透明GIF应该看起来不错，除非你需要其他一些样式......

祝你好运！

Answer 5

其他人的答案包括正确的内联样式语法，但我想我会明确指出：

您的原始样式规则如下所示：

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

应该看起来像这样：

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

等号不属于css语法，冒号就是那里所需要的。

这与其他人建议的跨度display:inline-block一起为我工作。像这样：

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

Answer 6

你是对的， span 不尊重宽度和高度，但是，它确实是一种荣誉填充。

您可以轻松设置框的宽度，使其左右填充。

高度有点棘手，因为空跨度似乎有一个高度所以你需要将font-size设置为0。

span.box {
    padding: 5px 8px;    // height 10, width 16
    font-size: 0px;
}

当然它在IE7（也可能是IE6）中不起作用，至少在IE7兼容模式下，当它为空时，盒子神奇地消失，当我在其中放置一个不间断的空间时，它没有显示底部边框（无论如何都会弄乱宽度）......

Answer 7

我相信这有效。

 <span style="display:inline-block;border:1px solid #00ff00;width:150px;height:50px;"></span>

非常确定'可以跨浏览器工作

Answer 8

width: 17px似乎不适用于内联或内联块元素。但反过来为什么不在块元素上制作技巧并让它们通过float: left显示为内联元素？

这就是我的尝试：

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

Answer 9

怎么样

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

Answer 10

不太了解你的更新，但一般来说，在HTML中绘制一组小的，空的内联框，表格是最简单的方法，因此我将把它留在这里，这有助于它。

只需定义表格......

   <table>
       <tr>
           <td id=one></td><td id=two></td><td id=three></td>
       </tr>
   </table>

然后使用你的.css格式化表格数据......

    tr{  height: 60px;}
    th, td{ width: 100px;}
    #one{   border:10px solid blue;}
    #two{   border:10px solid red;}
    #three{ border:10px solid green;}

根据您希望文本的位置，未格式化的表格单元格也可能是合适的。希望这会有所帮助。

在CSS中绘制空内联框？

10 个答案:

`display: inline-block`