Hel*_*len 4 css footer css-float
我试图拆分我的页脚,以便左对齐和右对齐文本.我有以下,但这两个元素一个接一个地显示:
#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.此外,如果您仍然悬浮段落,则可以省略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>