Question

我对CSS很陌生，但我希望这只是一个我很想念的东西。在www.sonogenics.co.uk上，Twitter块似乎向右浮动或者左边距为40px。我明确地将边距设置为0px并清除浮动等但是没有效果。在Firefox WebDeveloper插件中，它似乎是.tweet ul的一个问题，但我似乎无法修复它。有人可以向我解释发生了什么事吗？干杯克里斯

Answer 1

这应该解决它

#tweets ul { padding: 0px; }

默认情况下，

ul在大多数浏览器中都有左边填充（即WebKit 40px）。

Answer 2

它实际上有left-padding而不是保证金。这是ul元素的默认样式。要取消它，您应该将padding:0;放在#tweet ul样式声明中。

一些建议：

使用Firebug进行开发，它远远优于WebDeveloper插件。我能够立即发现使用它的问题
使用CSS重置样式表，删除这些默认样式声明并在浏览器中对其进行规范化（默认设置在浏览器之间不一致）。最着名的是CSS reset by Eric Meyer，我个人在我开发的每个网站上使用它。

Answer 3

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

Answer 4

由于您的css选择器，您的样式未应用。你的选择器是

.twitter ul, li {}

而你的元素的html是

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

你的css选择器说“将所有ul和li作为'twitter'类的任何元素的后代”。由于ul不包含在具有“twitter”类的祖先元素中，因此不会使用该规则进行样式设置。

如果您希望规则实际应用，您可以只使用选择器

.twitter {...}

或者你可以用“twitter”，

重新命名父div

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

或者您可以使用此选择器，

#tweets ul, li {...}

更接近您原始选择器。

CSS块位置问题

4 个答案: