1

小さな問題があります。3 つのソーシャル アイコンと、これらのアイコンが何であるかを示すテキストを含む下部のナビゲーション バーを追加しました。スクリーンショット

このテキストを本当は右か左に置きたいのですが、これは好きではありません。反対側でも同じことをします。

そのように、アイコンは本当に真ん中になります。

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container">
        <p class="navbar-text navbar-right text-right">Suivre l'IUT de Lens</p>
        <div class="social">
            <ul>
                <li><a href="URL"><i class="fa fa-lg fa-facebook"></i></a></li>
                <li><a href="URL"><i class="fa fa-lg fa-twitter"></i></a></li>
                <li><a href="URL"><i class="fa fa-lg fa-google-plus"></i></a></li>
            </ul>
        </div>
    </div>
</nav>

4

1 に答える 1

0

まず、あなたの「質問」にクエスチョン マークが見当たりません。将来の読者のために、質問を編集してより明確にすることをお勧めします。いずれにせよ、私はあなたが求めていることを知っていると思います (写真は役に立ちました)。答えは、CSS が必要だということです。

必要な間隔と配置を実現する方法は複数あります。ここに1つあります：

HTML (関係ないと思われるものをいくつか削除しました):

<nav>
<p style="width:100%"> 
    <div class="linktext">
        Suivre l'IUT de Lens
    </div>
    <div class="linkgroup">
        <a href="URL"><i class="link fa fa-lg fa-facebook"></i></a>
        <a href="URL"><i class="link fa fa-lg fa-twitter"></i></a>
        <a href="URL"><i class="link fa fa-lg fa-google-plus"></i></a>
    </div>
</p>

CSS:

.link {
    padding-right: 10px
}
.linkgroup{
    padding-right:20px;
    float:right;
}
.linktext {
    padding-right:20px;
    float: right;
}

したがって、CSS でプロパティを定義し、関連する CSS クラスを<div>/<p>/<whatever>

ここに JSFiddle があります: http://jsfiddle.net/af8rpc99/

于 2014-12-30T23:31:11.370 に答える