Html 如何在右侧和左侧对齐页脚文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15725098/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Align Footer Text on the Right and on the Left?
提问by KingPolygon
I'm trying to align text on the left and on the right side of my footer. The problem is that the text on the right falls a line below the text on the left. I want them to be even on the same line. Any help would be appreciated! Thanks for the help!
我正在尝试对齐页脚左侧和右侧的文本。问题是右边的文本比左边的文本低一行。我希望他们甚至在同一条线上。任何帮助，将不胜感激！谢谢您的帮助！
Here's my code: http://jsfiddle.net/kc6AL/
这是我的代码：http: //jsfiddle.net/kc6AL/
HTML
HTML
<!--Footerline-->
<div id="footerline">
<img src="http://s21.postimg.org/l6t6akypj/line.jpg"/>
</div>
<!--Footer-->
<div id="footer">
<h3 class="copyright">Copyright Stuff.</h3>
<h3 class="social">Social Links.</h3>
CSS
CSS
#footerline {
width: 100%;
overflow: hidden;
margin: 5px auto 10px auto;
text-align: center;
}
#footer {
max-width: 980px;
text-align: center;
margin: auto;
}
h3 {
font-family: 'Source Sans Pro', sans-serif;
text-transform:uppercase;
font-weight : 300;
font-size : 14px;
color : #000;
}
.copyright {
text-align: left;
}
.social {
text-align: right;
}
回答by Agustin Meriles
I've forked your jsfiddle:
我已经分叉了你的 jsfiddle：
the key here is to float the <h3/>s
这里的关键是浮动<h3/>s
CSS
CSS
.copyright {
float: left;
}
.social {
float: right;
}
HTML
HTML
<!--Footer-->
<div id="footer">
<h3 class="copyright">Copyright Stuff.</h3>
<h3 class="social">Social Links.</h3>
<div style="clear: both"></div>
</div>
Note that you must clearthe floated blocks, so the footer div will be fixed.
请注意，您必须清除浮动块，因此页脚 div 将被修复。
The reason that the text-align approach doesn't work in the way you will expected, is because <h3 />is a block element, so it will fill the entire width and causing the next h3to go to next "line". Giving the floatto a block element, will cause the element to shrink to its content and allowing other elements to be aside of it.
text-align 方法无法按您预期的方式工作的原因是因为它<h3 />是一个块元素，因此它将填充整个宽度并导致下一个h3转到下一个“行”。给float一个块元素，将导致元素收缩到它的内容，并允许其他元素在它的旁边。
回答by metadept
Just change your text-alignto floatfor both .copyrightand .socialand you're golden.
只要改变你text-align对float两个.copyright和.social你是金色的。
EDITHere's a jsFiddle demo with some unnecessary stuff removed: http://jsfiddle.net/kc6AL/6/
编辑这是一个 jsFiddle 演示，删除了一些不必要的东西：http: //jsfiddle.net/kc6AL/6/
回答by Arbel
Do this: (Add the floats to your css)
这样做：（将浮动添加到您的CSS）
.copyright {
float:left;
text-align: left;
}
.social {
float:right;
text-align: right;
}
回答by Scott
I would simply use one h3 and float the social icons within that head tag.
我会简单地使用一个 h3 并在该头部标签中浮动社交图标。
<h3 class="copyright"><span class="social">Social Links.</span>Copyright Stuff.</h3>
CSS
CSS
.social { float: right; }
回答by Naji Shmly
just add display: inline;to your h3 element.
see this: http://jsfiddle.net/kc6AL/3/
只需添加display: inline;到您的 h3 元素。看到这个：http://jsfiddle.net/kc6AL/3/
for more information: http://learnlayout.com/display.html
