span css help IE7 - 如何设置宽度？

Question

我有这个CSS，我无法在span元素上设置宽度。我有什么想法我做错了吗？

#address-readonly
{
  margin-left:150px !important;
  padding-left:100px;  
}

我在我的应用程序的2个区域中使用它。这是第一个区域：

<tr>
  <th colspan="2">Address Details</th>
  <th><span id="address-readonly" class="address-readonly"></span></th>
</tr>

这是第二个领域：

<div id="addressHeader" class="addressHeader">
<span>Address Details</span>
<span id="address-readonly" class="address-readonly"></span>

我希望address-readonly范围更加正确对齐。填充/边距组合几乎没有效果。我该怎么办？我不想添加一堆不间断的空格，但这基本上就是我想要的效果。这个特定的客户有一个办公室，里面装满了IE7机器，所以没有FireFox或Safari等......我也尝试过设置跨度的宽度。

Answer 1

试试这个：

#address-readonly
{
  display:block;
  float:left;
  margin-left: 150px;
  width: 100px; /* If you want to set the width */
}

或者你可以使用div而不是设置display属性。

Answer 2

如果适用，您可以尝试使用display: block：

#address-readonly {
    display: block;
    width: 200px;
}

没有浮动，跨度将在它自己的行上。希望有所帮助。

Answer 3

您唯一的选择是display block或inline-block，因为inline元素的内容会调整大小。另请注意，inline-block并不是很受支持。

Answer 4

Guillaume和Wicked Flea的答案相互补充，但缺少一些观点。

只有“box elements”可以设置其width / height属性。 Span是一个内联元素，因此它会自行调整大小以适应内容。

因此，如果您希望元素具有宽度设置，则应使用box元素。这里的问题是默认情况下框元素不在同一行中排列。然后，您可以使用float和margin将box元素与另一个box元素对齐。

所有这一切，使用Guillaume的回答会很好。但是可能会出现一些怪癖，请查看关于清除浮动的link链接。

我该怎么做：使用链接中提供的解决方法，然后将两个跨度用作div，并将它们浮动到左侧，并设置宽度和填充。