inline-blockでliが横並びになりません

質問

inline-blockを使って<li>を横並びにしようとした所、IE、chrome、fox(最新版)で
確認すれば横並びにはなっていますが、Dreamweaver cs4で見ると縦並びのままで、
使用する予定のブログで確認しても縦並びのままです。
ブログのテンプレCSSも見直しましたが原因になりそうなのが見つからず、
Dreamweaverでも横にならないので何か間違っているのかなと思いますが、
何を間違えているのかがわかりません。。。

なお、liは入り子で使用するつもりなのですが、該当するliだけ横にするのは問題ありでしょうか?
また、画像サイズは縦長・横長サイズが混在するので下記のようにしてますが、関係してるのでしょうか?
イメージ的には添付画像のようなのを希望してます。

すいませんが、ご教授お願いします。

<style type="text/css">
li.e {
display:inline-block;
vertical-align:top;
text-align: center;
overflow:visible;
width:150px;
}
li.e img {
max-height:100px;
width:150px;
}
</style>
<ul>
<li class= "h">あいうえお</li>
<li class= "w">
<ul>
<li class= "e"><a href="./a.jpg" ><img src="./a.jpg"><br>
あああああああああああああああああ</a></li>
<li class= "e"><a href="./a.jpg" ><img src="./a.jpg"><br>
いいいいいいいいいいいいいいいいいい</a></li>
<li class= "e"><a href="./a.jpg" ><img src="./a.jpg"><br>
うううううううううううううううううう</a></li>
<li class= "e"><a href="./a.jpg" ><img src="./a.jpg"><br>
ええええええええええええええええええええ</a></li>
</ul>
</li>
</ul>

回答No.2

balloon23 · ベストアンサー

cs4のドリームウィーバーさんの場合、デザインビューでinline-blockなどはあまりうまく動作してくれないっぽいです。
http://cssnite.jp/ginza/vol29/
cs4にライブビューって入ってましたっけ？
そっちを使った方が良いかも。

ブログで横並びにならないのも謎。
たとえばliの親のulにwidth設定してみてはどうでしょう？

入れ子は気になるなら一旦消してから検証してみた方が良いかもしれません。

お礼

ご回答ありがとうございます。
cs4は動作が上手くいかないんですね。。。
おっしゃる通りデザインビューで見ると縦並びになって悩んでいました。

なお、色々試した結果ブログの方はIE7対策用の*display:inline; *zoom:1;を使えばIE、chrome、fox最新版でブログ見ても横に並ぶのに気づきました。
IE７対策用なので現行バージョンには関係ないと除外して原因探ってましたが、条件次第では影響するみたいです。
リキッドレイアウトが原因？？

cs4と同じ原因と思い込んでいましたが、それぞれ別々の原因だったみたいで教えて頂きcs4の謎も解けました。
ありがとうございました

回答No.1

ORUKA1951

デザイン目的でHTMLを書こうとするから、他人にはさっぱりになる。
要は、
・二階層の順不同リストがあり、二階層目の序列リストの項目は横に並べて表示したい
・ニ階層目のリストでは画像と説明文が一つの項目(list Item <li>)になる。
　ということですよね。
<ul id="ProductList"><!-- 商品リストだとidで示しておく -->
　<li>あいうえお</li>
　<li>
　　<ol>
　　　<li>画像
　　　　<p>説明文</p>
　　　</li>
　　　<li>画像
　　　　<p>説明文</p>
　　　</li>
　　　<li>画像
　　　　<p>説明文ここに画像の説明が入る。</p>
　　　</li>
　　</ol>
　</li>
</ul>
　こうして、文書構造だけに専念してHTMLを書きましょう。この『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』はすべての基本です。!!読んでおくこと短文です。

　そうすると、スタイルシートは簡単で分かりやすいし、HTMLの制約受けないのでどのようにもデザイン変えられる。

ul#ProductList ol,ul#ProductList ol li{
margin:0;padding:0;
}/* リストのスタイルをリセット */
ul#ProductList li ol li{
list-style:none;
width:160px;
height:240px;
display:inline-block;
position:relative;
border:solid 1px gray;
vertical-align:top;
}
ul#ProductList li ol li img{
display:block;
width:150px;margin:0 auto 5px auto;
height:auto;
}
ul#ProductList li ol li p{
font-size:13px;
margin:0;
text-indent:1em;
line-height:1.6em;
padding:5px;
}
/* 画像はよほど縦長でない限り収まるかな・・*/