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だけでシンプルな可変式のドロップダウンメニューを作ってみた

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみました。…

  2. CSS

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

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

  3. (cs)spinner

    CSS

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

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

  4. CSSでborderにグラデーションをかけたようにする

    CSS

    CSSでborderにグラデーションをかけたようにするやり方

    CSSでborderにグラデーションを直接かけたいんですが、なんかでき…

  5. CSS

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

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

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

    CSS

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

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

コメント

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

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

最近の記事

  1. OWL-WDDESK01
  2. ワンタッチ着脱フィルターキット
  3. Soundcore Ace A1
  4. cheero USB-C PD Charger 60W

アーカイブ

PAGE TOP