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

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

我已经分享了你的jsfiddle：

http://jsfiddle.net/82ZU8/

这里的关键是浮动<h3/> s

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

请注意，您必须清除浮动块，因此页脚div将被修复。

文本对齐方法无法按预期方式工作的原因是因为<h3 />是一个块元素，因此它将填充整个宽度并导致下一个h3去下一个“线”。将float赋予块元素将导致元素缩小到其内容并允许其他元素放在一边。

Answer 2

只需将text-align更改为float .copyright，.social和{{1}}即可。

编辑以下是一个jsFiddle演示，删除了一些不必要的内容：http://jsfiddle.net/kc6AL/6/

Answer 3

我只需使用一个h3并将社交图标浮动到该标题内。

Updated fiddle

<h3 class="copyright"><span class="social">Social Links.</span>Copyright Stuff.</h3>

CSS

.social { float: right; }

Answer 4

只需添加display: inline; 你的h3元素。 看到这个：http://jsfiddle.net/kc6AL/3/

了解更多信息：http://learnlayout.com/display.html

Answer 5

执行此操作:(将浮动添加到css中）

.copyright {
 float:left;
 text-align: left;
}

.social {
 float:right;
 text-align: right;
}