<ul>タグと<li>タグで列表示

こんにちは。
以下サイト

http://www.mirabella.jp/MiraTop.do

のブランドリストのソースを見ると、

<div id="list_en4" class="clearfix"><!-- #list_en -->
<ul>

<li class="initial">A</li>
<li><a href="/ItemPrdList.do?brandId=01394&crumbType=0:brands">ACCESSORIES &amp; BEYOND</a></li>
<li><a href="/ItemPrdList.do?brandId=01376&crumbType=0:brands">ADIDAS BY STELLA McCARTNEY</a></li>
<li><a href="/ItemPrdList.do?brandId=01381&crumbType=0:brands">ALTEA</a></li>
<li><a href="/ItemPrdList.do?brandId=01382&crumbType=0:brands">ALPO</a></li>

<li><a href="/ItemPrdList.do?brandId=01661&crumbType=0:brands">AMERICAN RAG CIE</a></li>
<li><a href="/ItemPrdList.do?brandId=01405&crumbType=0:brands">AMET &amp; LADOUE</a></li>
<li><a href="/ItemPrdList.do?brandId=01406&crumbType=0:brands">ANGLO LEATHER</a></li>
<li><a href="/ItemPrdList.do?brandId=01677&crumbType=0:brands">ANYA HINDMARCH</a>
<li><a href="/ItemPrdList.do?brandId=01355&crumbType=0:brands">A.T</a></li>


<li class="initial">B</li>
<li><a href="/ItemPrdList.do?brandId=01508&crumbType=0:brands">BALMUIR</a></li>
<li><a href="/ItemPrdList.do?brandId=01365&crumbType=0:brands">BRUNO CARLO</a></li>

<li class="initial">C</li>
<li><a href="/ItemPrdList.do?brandId=01513&crumbType=0:brands">CACHAREL</a></li>
<li><a href="/ItemPrdList.do?brandId=01675&crumbType=0:brands">CALLEEN CORDERO</a>

<li><a href="/ItemPrdList.do?brandId=01402&crumbType=0:brands">CHAN LUU</a></li>
<li><a href="/ItemPrdList.do?brandId=01407&crumbType=0:brands">CITRUS</a></li>
<li><a href="/ItemPrdList.do?brandId=01388&crumbType=0:brands">COLETTE MALOUF</a></li>

<li class="initial">D</li>
<li><a href="/ItemPrdList.do?brandId=01478&crumbType=0:brands">DEMI</a></li>
<li><a href="/ItemPrdList.do?brandId=01524&crumbType=0:brands">DELICIOUS FREAKS</a></li>


<li class="initial">E</li>
<li><a href="/ItemPrdList.do?brandId=01369&crumbType=0:brands">ELEY KISHIMOTO</a></li>
<li><a href="/ItemPrdList.do?brandId=01522&crumbType=0:brands">ERIBE</a>
</ul>
</div>

この表示のみでリストが3列で表示されているのですが、
このように3列で表示させるCSSの設定方法をご存知でしたら
教えていただけますでしょうか？

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2009/12/31 20:33

CSSもソースを確認すればよいでしょう。

firefox + Firebug が便利です。
なお、示された部分は、javascriptでdisplay:none;に通常はなっていて、普通は表示されない。アルファベットをクリックすると表示される。
　詳しくは、Firebugで確認してください。

　基本的には、ulをブロックに変換(display:block)して、内部のliもブロックにして、それを親のコンテナブロック内でfloatさせているだけのようです。

この回答へのお礼

回答ありがとうございます！
最初、Htmlを完全で保存していたんですが、対象のcssファイルが見つからなかったので、インポートで設定しているファイルは見れないのかと思っていました。FireBugはインポートされているcssも参照することができるんですね。まずはこちらでも設定してみて、できるかどうかを
確認してみたいと思います。
ありがとうございました！！

お礼日時：2009/12/31 21:28

No.1 回答者： noname#137826 回答日時： 2009/12/31 17:56

私には4列で表示されますが・・・

例があるのでしたら、その例を見るのが手っ取り早いでしょう。

ソースを見ると、A-E, F-L, M-R, S-Z がそれぞれ異なったul要素の子要素になっています。それぞれのul要素にはfloat: left;が指定されています。基本的には、これによって、4つのul要素が左から順に並び、リストが4列で表示されるように見えます。

しかし、これだけでは、ul要素の幅と親要素の幅の関係によっては、ul要素が横に4つ並ばず、3つが並んで残り1つは(改行されたように)下に表示されることもありえます。

実際にはそうなっていないのは、ul要素の親要素の幅(*1)が、各ul要素の幅(*2)、に対して大きく、ul要素を4つ並べることができるように設定されているからです。

*1 正確には親の親の親である<div id="brandlist">が決定している
*2 子要素の<li class="initial">が決定している

この回答へのお礼

回答遅くなり申し訳ありません。
kaorine様が指摘された、Divタグとliタグのbrandlistとinitialを
設定に反映してみたところ設定することができました。
Firebugでここまで見れるとは知らなかったものですから
大変参考になりました。

こちらで解決です。

ありがとうございました！

お礼日時：2010/01/02 12:43