2

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

这是我的代码：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;

}
4

5 回答 5

10

我已经分叉了你的 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 将被固定。

text-align 方法不能按您预期的方式工作的原因是因为<h3 />它是一个块元素，因此它将填充整个宽度并导致下一个h3进入下一个“行”。给float一个块元素，将导致元素收缩到它的内容，并允许其他元素在它旁边。

于 2013-03-31T00:40:45.727 回答
3

只需将你text-align的float两者都更改为.copyright，.social你就是金色的。

编辑这是一个 jsFiddle 演示，删除了一些不必要的东西：http: //jsfiddle.net/kc6AL/6/

于 2013-03-31T00:37:02.200 回答
1

这样做：（将浮动添加到您的 CSS）

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

.social {
 float:right;
 text-align: right;
}
于 2013-03-31T00:50:44.980 回答
0

我会简单地使用一个 h3 并将社交图标浮动在该头部标签中。

更新的小提琴

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

CSS

.social { float: right; }
于 2013-03-31T00:41:03.517 回答
0

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

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

于 2013-03-31T00:43:33.850 回答