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

    CSS3でシンプルで簡単なボタンを作ってみる

    CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSS…

  2. CSSで背景画像をアニメーションさせる

    CSS

    CSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

    ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CS…

  3. CSS

    CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  4. CSS

    CSSを使ったエフェクトつきボタンを探せる「CSS Buttons」

    CSSでエフェクトがついたボタンを作りたいときに役立つ「CSS But…

  5. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  6. CSS

    CSSで画像をfloatさせた時にテキストの行間を綺麗に揃えるやり方

    何気にこういう細かい部分を調整してあげると見た目も綺麗なりますよね。C…

コメント

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

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

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP