汗っかきなせいか、最近は1日に2回下着を着替えているjyunzyです
先日はテキスト形式のグローバルナビを作ろうと思ったのですが、liタグを横に並べて
中央揃えをする時に見事にハマってしまいました。
私の認識では、横に並べる=floatプロパティ、というイメージだったのですが
リストをfloat:leftで並べると左詰めになってしまい、中央揃えになりません。
(当たり前ですが・・・)
text-align:center;やmargin:0 auto;を使っても中央になりません。
ネットで調べてみたら一応、leftプロパティやoverflowプロパティ、positionプロパティ
を
使えば中央揃えにできるのですが、どうも煩わらしい感じがしました。
そんな事をツイートしていたら、「他の方法でもできるでしょ」とご指摘がありました。
ホントかな~?と思い検索してみたら、以下のようなスタイルシートを書けばいい事がわかりました。
li { display:inline; }
実際に上のようにliタグをブロックレベル要素からインライン要素に変換したら、横一列に並びました。
pタグのようにtext-alignプロパティを使えば、中央揃えにもできます。
別にfloatプロパティを使わなくても、横に並べる手段ってあるんですね・・・。しかも簡単だし。
今の自分のやり方が本当に正しいのか?という事を日頃から考えて仕事をしたいですね。