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も指定できるのでこちらの方がいいかもしれません。

指定した親ページの子ページを取得してみる前のページ

WordPressでグーグルアナリティクスをフッターにadd_actionを使って表示させる次のページ

最近の記事

  1. 縦置きスタンド
  2. スマトラ
  3. さくらドーナツ
PAGE TOP