CSS

ulのリストを横並びにしてtext-alignを適用させる方法

ちょっと悩んじゃいました。ulのli要素を横並びにしてそれにtext-alignで右側に全部移動したかったんですけどfloatでやると全然効かないんですね。

[ads_center]

floatではなくdisplay:inlineを使ってみる

横並びしたリストを右に寄せるやり方はpositionを使ったり他にもあるのですがこっちの方が簡単そうだったのでメモしときます。

<ul>
<li><a href="#">リスト</a></li>
<li><a href="#">リスト</a></li>
<li><a href="#">リスト</a></li>
<li><a href="#">リスト</a></li>
<ul>
ul {
    background: #ccc;
    text-align: right;
}
ul li {
    display: inline;
}

inline

以上です。めっちゃ簡単です。どんな時使うのかっていうとヘッダーのナビゲーションとかでも使えそうな感じです。けどこれだとa要素にdisplay:blockが効かないのでwidthやheightが指定できません。

display:inline-blockを指定してみる

もう少し実用性を持たせるにはこっちの方がいいのかもしれません。

ul {
    background: #ccc;
    text-align: right;
}
ul li {
    background: pink;
    display: inline-block;
    margin-left: 10px;
}
ul li a {
    display: block;
    width: 200px;
    height: 50px;
}

inline-block

こうすればwidthやheightも指定できるのでこちらの方がいいかもしれません。

関連記事

  1. 動画をレスポンシブにするCSS

    CSS

    動画をレスポンシブに対応させるCSSのTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

  2. li要素の折り返したテキストを揃える

    CSS

    li要素のテキストを折り返した時に頭文字の余白を揃えるやり方

    またどこかで使いそうな感じがしたので記録として残しておきます。ulのl…

  3. Light Modal

    CSS

    パワフルでカスタマイズ性に優れたCSSモーダル「Light Modal」

    Light Modalは、軽量・パワフルでカスタマイズ性に優れたCSS…

  4. CSSで文字の長さに合わせる

    CSS

    CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方

    CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介し…

  5. (cs)spinner

    CSS

    CSSだけでミニマルなローディングアニメーションを実装できる「(cs)spinner」

    CSSだけでローディングアニメーションを実装できる「(cs)spinn…

  6. CSSで上下の要素を入れ替えて配置させるやり方

    CSS

    CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

    CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP