4

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

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

我敢肯定应该很简单，但我就是无法让它工作——有人可以提供任何建议吗？

谢谢

海伦

4

5 回答 5

8

您正在使用footer p .right而不是footer p.right（注意空格字符）。这意味着.rightand.left类不适用于段落，但适用于段落内的后代元素。或者它也可能意味着一个错字，导致你的 CSS 失败:)

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

编辑：我看到你现在已经发布了你的 HTML。我的假设被证明是正确的。去掉pand .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>
于 2009-05-15T08:39:58.253 回答
1

无需像之前建议的那样删除 #footer 上的 clear:both 。正如 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>
于 2009-05-15T09:06:52.947 回答
1

您是否尝试过为左右设置宽度，例如各 50%

于 2009-05-15T08:39:07.693 回答
0

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

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

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

于 2009-05-15T08:44:15.357 回答
0

问题是#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>
于 2009-05-15T08:51:22.577 回答