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

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

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

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

Answer 2

试试这个：

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

或者你可以使用一个div并没有设置显示属性。

Answer 3

您的唯一选择是display值block或inline-block，因为inline元素的大小是按其内容调整的。另请注意，inline-block没有得到很好的支持。

Answer 4

纪尧姆和邪恶的跳蚤的答案互为补充，但有些点不见了。

只有“盒子元素”可以设置其宽度/高度属性。跨度是内联元素，因此它会自行调整其大小以适应内容。

所以，如果你想要你的元素有宽度设置，你应该使用一个盒子元素。这里的问题是，默认情况下，box元素不在同一行中排列。然后，您可以使用浮动和边距将一个框元素与另一个框元素对齐。

所有的说法，这将是很好的使用纪尧姆的答案。但可能会出现一些怪癖，请检查这个关于清除浮标的链接link。

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