2

フッターの左右にテキストを揃えようとしています。問題は、右側のテキストが左側のテキストの 1 行下にあることです。私はそれらが同じ線上にあることを望んでいます。どんな助けでも大歓迎です！助けてくれてありがとう！

これが私のコードです: 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-aligntoに変更するだけで、あなたはゴールデンです。float.copyright.social

EDITこれは、いくつかの不要なものを削除した 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

display: inline; h3 要素に追加するだけです。これを参照してください：http://jsfiddle.net/kc6AL/3/

詳細については、http: //learnlayout.com/display.htmlをご覧ください。

于 2013-03-31T00:43:33.850 に答える
0

単純に 1 つの h3 を使用して、その head タグ内でソーシャル アイコンをフロートします。

更新されたフィドル

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

CSS

.social { float: right; }
于 2013-03-31T00:41:03.517 に答える