Question

我正在尝试拆分我的页脚，以便左对齐和右对齐文本。我有以下内容，但这两个元素一个接一个地显示：

#footer {
    clear: both;
    background-color: #330066;
    padding: .5em;
    font-size: 0.8em;
    color: #fff;
}

#footer p .left {
    text-align:left;
    float:left;
}

#footer p .right {
    float:right;
    text-align:right;
}


<div id="footer">
    <p class="left">
        Copyright © 2009 
    </p>
    <p class="right">
        Designed by xxxxxx
    </p>
</div>

应该非常简单我确定但是我无法让它发挥作用 - 有人可以提供任何建议吗？

由于

海伦

Answer 1

您使用的是footer p .right而不是footer p.right（请注意空格字符）。这意味着.right和.left类不适用于段落，而是适用于段落中的后代元素。或者它也可能意味着拼写错误，导致您的CSS失败：）

请在此处复制您的HTML，以便我们为您提供更好的帮助。

修改：我发现您已经发布了HTML。我的假设证明是正确的。摆脱p和.left / .right之间的空格。此外，如果您仍然悬浮段落，则可以省略text-align属性。

#footer p.left { float: left; } #footer p.right { float: right; }

修改：回复您的评论：它应该有效。这是一个小测试案例：

<!DOCTYPE html> <html lang="en"> <head> <title>Test case for the CSS footer problem</title> <style> #footer { width: 300px; outline: 1px solid red; } #footer p.left { float: left; } #footer p.right { float: right; } </style> </head> <body> <p>See <a href="http://stackoverflow.com/a/867599/96656" title="Stack Overflow: CSS footer; trying to split into two columns">http://stackoverflow.com/a/867599/96656</a> for details. <div id="footer"> <p class="left">Copyright © 2009</p> <p class="right">Designed by xxxxxx</p> </div> </body> </html>

Answer 2

您是否尝试过设置左右宽度，例如每个

50％

Answer 3

无需删除clear：两者都在#footer之前，如前所述。正如所说的Mathias Bynens你必须写“p.left”而不是“p .left” 在两段之后你需要清楚，并最终得到类似的东西：

#footer {
    clear: both;
    background-color: #330066;
    padding: .5em;
    font-size: 0.8em;
    color: #fff;
}

#footer p.left {
    text-align:left;
    float:left;
}

#footer p.right {
    float:right;
    text-align:right;
}


<div id="footer">
     <p class="left">
         Copyright © 2009 
     </p>
     <p class="right">
         Designed by xxxxxx
     </p>
     <div style="clear:both"></div>
</div>

Answer 4

由于段落是块级元素，如果您希望它们并排显示，您应该删除浮动并将它们设置为内联：

footer p.left {text-align:left; display:inline; }
footer p.right {text-align:right; display:inline; }

我还假设事先应该是#footer或.footer？

Answer 5

问题在于，#footer你有一个clear: both;会杀死所有花车。

如果你有以下情况会更好：

#footer {
    background-color: #330066; 
    padding: .5em; 
    font-size: 0.8em; 
    color: #fff;
    width: 100%;
    overflow: hidden;
 }

p.left { float: left; }
p.right { float: right; }

width: 100%;和overflow: hidden;会解决您的问题，因为它会在制作后清除浮动广告。

使用上面的代码，您将能够拥有：

<div id="footer">
    <p class="left">Copyright &copy; 2009</p>
    <p class="right">Designed by ****</p>
</div>

css页脚 - 试图分成2列

5 个答案: