グリレゼクスでねぇ('A`)

陽炎2号/3号ｶｯｺﾖｽ

またリニュのサイトでコーディング依頼が

忙しく無いと言うとウソになります・・・。今度のデザイナーさんは、よくある角丸のボックスデザイン。曲線の使い方が上手い。気になるのは width:880px ぐらいで、各ブロック要素毎のマージンや横幅は揃ってる模様。うん、前のデザイナさんより大分マシ。

で、コーディングの話。よく、

• <ul>
•   <li>お知らせ</li>
•   <li>企業情報</li>
•   <li>製品情報</li>
•   <li>ポリシー</li>
•   <li>お問合せ</li>
• </ul>

と、リストでナビゲーションやコンテンツを横並びにするときにCSSで、

• li{
•   float:left
•   width:120px
• }

として、次の要素で clear:both; するのですが、今回のデザイナさんに教えて貰ったのが、

• ul{
•   overflow:hidden;
• }
• li{
•   display:inline
• }

と、リストをインライン要素に変換するやり方。これだと、一々、次の要素で float を clear する必要がなくなるワケで。加えて前者のやり方では、センタリングが効かなくなる症状がたまに起こっていたので、これは良い発見（`・ω・´）

・・・なんですケド、li にへんなマージンが入って、margin-left:-4px とかするハメに・・・（´・ω・`）

一日遅れで

そぅそぅ、バースデイケーキは帰り際に途中下車して購入ヽ(´ー`)ﾉ

コメント 2

それはマージンではなく改行が半角スペースとして認識されているために
生じた空白です、たぶん。
li要素がinline要素として処理された結果ってことです。
はてダに解決方法書いておいたから参考にしてください。無関係だったらごめん。
by Rusica (2008-04-06 02:05) 

はてダみたよー。
ググってみたら、まさかタブと改行が認識されるとは・・・

とりあえず、一行にするとかコメントアウトするよりも、
marginでどうにかする方が性に合いそう。
ありがとでした。
by Elmdore (2008-04-06 10:33)