我正在尝试拆分页脚，以便文本左对齐和右对齐。我有以下内容，但两个元素一个接一个地显示:
#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>
我确定应该非常简单，但我就是无法让它工作 - 谁能提供任何建议？
谢谢
海伦
最佳答案
您使用的是 footer p.right 而不是 footer p.right(注意空格字符)。这意味着 .right 和 .left 类不适用于段落，而是应用于段落内的后代元素。或者它也可能意味着打字错误，导致您的 CSS 失败:)
请在此处复制您的 HTML，以便我们更好地帮助您。
编辑:我看到您现在已经发布了您的 HTML。事实证明我的假设是正确的。去掉 p 和 .left/.right 之间的空格。此外，如果您仍然要 float 段落，则可以省略 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>
关于css 页脚 - 试图分成两列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/867587/