css页脚 – 试图分成2列

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

#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>

应该是非常简单我敢肯定,但我无法让它工作 – 任何人都可以提供任何建议吗？

谢谢

海伦

解决方法

你正在使用页脚p .right而不是页脚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="https://stackoverflow.com/a/867599/96656" title="Stack Overflow: CSS footer; trying to split into two columns">https://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>

css页脚 – 试图分成2列

解决方法

相关推荐