html - 如何在右侧和左侧对齐页脚文本？

Question

我正在尝试对齐页脚左侧和右侧的文本。问题是右边的文本在左边的文本下方一行。我希望他们甚至在同一条线上。任何帮助，将不胜感激!感谢您的帮助!

这是我的代码:http://jsfiddle.net/kc6AL/

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

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

}

Answer 1

我已经 fork 了你的 jsfiddle:

http://jsfiddle.net/82ZU8/

这里的关键是 float <h3/>

CSS

.copyright {
    float: left;
}

.social { 
    float: right;
}

HTML

<!--Footer-->
<div id="footer">
    <h3 class="copyright">Copyright Stuff.</h3>
    <h3 class="social">Social Links.</h3>
    <div style="clear: both"></div>
</div>

请注意，您必须清除 float block ，这样页脚 div 才会固定。

文本对齐方法无法按您预期的方式工作的原因是 <h3 />是一个 block 元素，所以它将填充整个宽度并导致下一个 h3转到下一个“行”。给予float到 block 元素，将导致元素缩小到其内容并允许其他元素放在它旁边。