TwitterBootstrapulliタグ横並べ

2016年3月12日更新 view: 3159 view
photoBy: http://wp.endo.jp.net/wp-content/uploads/2012/07/Twitter-Bootstrap.png

ul li タグを横並べするには?

まずは、twitterbootstrap を読み込んであることが条件。
で、classに nav nav-pills を指定すれば横並びメニューのできあがり。

<ul class="nav nav-pills">
    <li><a href="/">りんご</a></li>
    <li><a href="/">みかん</a></li>
    <li><a href="/">ぶどう</a></li>
</ul>

右寄せするには?

.pull-rightを指定するのがベスト。

<div class="col-xs-11">
@gengesa 再生ごとに違う波形が出力されたという事象(結果)は嘘ではないって話をしたいだけで、作曲家さんの論理が正しいとは思ってないです。
<ul class="nav nav-pills pull-right">
<li><a href="/"><i class="fa fa-reply"></i> 返信</a></li>
<li><a href="/"><i class="fa fa-thumbs-o-up"></i> 6</a></li>
</ul>
</div>

さらに右寄せしたい

右寄せしたい場合は、 float right を設定すればOK!

<ul class="nav nav-pills" style="float:right;">
    <li><a href="/intro/">お友達を紹介</a></li>
    <li><a href="/users/add/">基本情報の変更</a></li>
    <li><a href="/users/social/">ソーシャル連携</a></li>        
    <li><a href="/users/logout/">ログアウト</a></li>
</ul>
<div class="clearfix"></div>

センタリング中央寄せしたい

.nav.center {
    float:left;left:50%;position:relative;
}

.nav.center li {
    float:left;
    left:-50%;
    position:relative;
}
<ul class="nav nav-pills center">
    <li><a href="/intro/">お友達を紹介</a></li>
    <li><a href="/users/add/">基本情報の変更</a></li>
    <li><a href="/users/social/">ソーシャル連携</a></li>        
    <li><a href="/users/logout/">ログアウト</a></li>
</ul>
<div class="clearfix"></div>

センタリングの方法その2

2016/03/12
こっちのがやりやすいかも。

スポンサードリンク

css

.list-inline a{
font-size: 0.7em;
color: #999;
}


footer {
background-color: #eceef0;padding-top: 15px;margin-bottom: -15px;
text-align: center;
}

html

<footer>


<ul class="list-inline spacer">
<li><a href="/">よくある質問</a></li>
<li><a href="/">お問い合わせ</a></li>
<li><a href="/">利用規約</a></li>
<li><a href="/">プライバシーポリシー</a></li>
<li><a href="/">特定商取引法に基づく表示</a></li>
<li><a href="/">お買い物ガイド</a></li>
<li><a href="/">運営者情報</a></li>
</ul>
<div class="clearfix"></div>



</footer>
スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

6月25日 ( 日 ) にアクセスが多かった記事はこちら!