CSS塊位置問題

Question

我很新的CSS，但我希望這只是我明顯缺少的東西。 在www.sonogenics.co.uk上，Twitter塊看起來漂浮在右邊或具有40px的左邊距。我已明確設置邊距爲0px並清除浮動等，但沒有效果。從Firefox WebDeveloper插件看，它似乎是.tweet ul的問題，但我似乎無法解決它。有人可以向我解釋發生了什麼事嗎？ 乾杯 克里斯

Answer 1

它實際上有left-padding而不是保證金。這是ul元素的默認樣式。要取消它，您應該在樣式聲明中放入padding:0;。

一對夫婦的建議：

• 使用Firebug的發展，這是遠遠優於WebDeveloper附加。我能夠立即發現使用它的問題
• 使用CSS重置樣式表，刪除這些默認樣式聲明並在瀏覽器中對其進行規範化（默認值在瀏覽器之間不一致）。最有名的是CSS reset by Eric Meyer，我個人在我開發的每個網站上使用。

Answer 2

這應該修復它

#tweets ul { padding: 0px; } 

ul S按默認在大多數瀏覽器（即WebKit的40像素）有一個左填充。

Answer 3

由於您的css選擇器，您的樣式沒有被應用。你的選擇是

.twitter ul, li {} 

，而你的HTML元素是

<div id="tweets"> 
    <ul class="twitter">...</ul> 
</div> 

你的CSS選擇器說「的風格所有UL和李是用‘推特’類中的任何元素的後代」。由於ul不包含在具有「twitter」類的祖先元素中，因此不會使用該規則進行樣式設計。

如果您希望規則實際應用，你可以只使用選擇

.twitter {...} 

，或者你可以重新類「推特」父DIV，

<div id="tweets" class="twitter"> 
    <ul class="twitter">...</ul> 
</div> 

，或者你可以使用此選擇器代替，

#tweets ul, li {...} 

它更接近您的原始選擇器。

Answer 4

@chris robinson;我檢查了你的twitter/style.css你的主要問題是你錯誤地聲明瞭CSS，爲什麼這些屬性不起作用。

錯誤的CSS聲明：

.twitter #tweets { 
    background: #111; 
    padding: 0 0px; 
    padding-bottom:20px; 
    text-align:left; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    border-color:#AAA; 
    border-style:solid; 
    border-width:2px; 
    margin:0px; 
} 

.twitter ul, li { 
    list-style-type: none; 
    background: #222; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    border-color:#AAA; 
    border-style:solid; 
    border-width:1px; 
    padding-left:0px; 
    padding-right:0px; 
    padding-bottom:0px; 
    margin:0px; 
    -webkit-padding-start:10x; 
} 

.twitter #tweets a { 
    color: #AAA; 
    text-decoration:none; 
} 

.twitter #tweets a:hover { 
    color: #AAA; 
} 

，如果你檢查你的HTML你的Twitter類是境內關外#tweets它不是。所以，首先糾正你的CSS。

正確的CSS：

#tweets .twitter { 
     background: #111; 
     padding: 0 0px; 
     padding-bottom:20px; 
     text-align:left; 
     -moz-border-radius: 5px; 
     border-radius: 5px; 
     border-color:#AAA; 
     border-style:solid; 
     border-width:2px; 
     margin:0px; 
    } 

    #tweets ul.twitter li { 
     list-style-type: none; 
     background: #222; 
     -moz-border-radius: 5px; 
     border-radius: 5px; 
     border-color:#AAA; 
     border-style:solid; 
     border-width:1px; 
     padding-left:0px; 
     padding-right:0px; 
     padding-bottom:0px; 
     margin:0px; 
     -webkit-padding-start:10x; 
    } 

    #tweets .twitter a { 
     color: #AAA; 
     text-decoration:none; 
    } 

    #tweets .twitter a:hover { 
     color: #AAA; 
    }