8

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

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

早些时候，之前做过简单的 .gif 图像，但随着浏览器的显示放大或缩小，看起来很模糊。

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

你能建议一个CSS'y方式吗？

更新 假设以下内容，如果我浮动它，它将结合到文本的右侧或左侧，并且我需要根据浏览器的宽度将它内联到文本中，&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>
4

10 回答 10

15

height并且width只能应用于具有hasLayout属性的元素。SPAN 元素默认不实现此属性。

因为 inline-block 不能在所有主要浏览器上正常工作，我建议使用 padding-dimension 技巧：

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

您可能需要对尺寸进行一些操作，因为 globalfont-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">&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>.

此代码将其作为输出生成： alt text http://img413.imageshack.us/img413/5865/boxes.png

而且因为我们把&nbsp;每个 span 都放进去，所以这个技巧适用于所有浏览器。

于 2009-11-17T17:48:30.030 回答
5

你可以试试css显示参数inline-block。但是你的里程数与这个不同。

display: inline-block

内联块被内联放置（即与相邻内容在同一行），但它的行为类似于块。

于 2009-11-17T17:47:12.207 回答
4

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

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

    <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>
于 2012-06-21T14:53:10.577 回答
3

这个页面上有很多好的建议。不过，我想知道，当您尝试使用 GIF 时，您的图形的边框是一部分吗？

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

祝你好运！

于 2009-11-18T02:01:48.973 回答
3

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

根据您想要放置物品的位置，您可以执行display:block; float:[left or right]

于 2009-11-17T17:48:16.933 回答
2

你是对的，跨度不尊重宽度和高度，但是，它确实有点荣誉填充。

您可以轻松设置框的宽度，为其设置左侧和/或右侧填充。

高度有点棘手，因为空跨度似乎有一个高度，因此您需要将字体大小设置为 0。

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

当然，它在 IE7（可能还有 IE6）中不起作用，至少在 IE7 兼容模式下，当我在其中放置一个不间断空格时，该框会在它为空时神奇地消失并且不显示底部边框（这搞砸了无论如何宽度）...

于 2009-11-18T01:53:11.183 回答
1

似乎这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>
于 2012-06-16T01:45:03.490 回答
1

我相信这行得通。

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

很确定这可以跨浏览器工作

于 2009-11-18T10:16:59.783 回答
1

不太了解您的更新，但一般来说，在 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;}

根据您希望文本定位的方式，未格式化的表格单元格也可能是合适的。希望这可以帮助。

于 2018-01-22T02:31:28.050 回答
0

怎么样 

<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>
于 2009-11-17T17:52:12.510 回答