ブックマーク / rapid-progress.net (1)

  • 【CSS】横並びリストを中央寄せにする方法(float、inline-block) | Rapid Progress

    横並びリストを中央寄せにする方法は何パターンもあるかと思うのですが、それぞれ特徴を理解して使っていかないとっていうお話です。やり方は何パターンもあるかと思うのですが、それぞれ特徴を理解して使っていかないとっていうお話です。 1.floatを使う方法 floatを使う方法は、liをブロック要素のままfloatさせ、ulにwidthと左右のmarginにautoを指定してやります。 ブロック要素は左右のmarginを計算するためにulのwidthを指定しなければなりません。なので、幅が変化する可能性のあるリスト(テキストや数が増減する場合)には向いていません。画像のメニューで個数が固定されている場合などには使えるかもしれません。 また、liをfloatさせることでulが高さを認識できなくなるので、ulにoverflow:hidden;やclearfixなどを入れてやらないと上下のmarginが

  • 1