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; 
    }