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，並將它們浮動到左側，設置寬度和填充。