掲示板/スタイルシート質問板/過去ログ/一覧/ 入れ子<ul>を一列に表示

0 名前： esu ： 2007/03/22（木） 14:23 ID:4/N75WFT sub-Ds: こんにちわ。
入れ子になった<ul>を一列に表示したいです。
サファリとFirefoxでは上手くいったのですが
IE6でうまくいきません。

htmlのソースは
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

<ul class="read">
<li class="read_number">創刊号</li>
<ul>
<li class="read_01"><a href="01.html">あああああ</a></li>
<li class="read_02"><a href="02.html">いいいいい</a></li>
<li class="read_03"><a href="03.html">ううううう</a></li>
</ul>
</ul>

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

cssのソースは
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
@charset "Shift_JIS";

h1,h2,h3,h4,h5,h6,p,ul,ol,pre,blockquote,strong,em,address{
font-size:medium;
font-style: normal;
font-weight: normal;
text-decoration: none;
margin:0;
padding:0;
line-height:1;
}

ul{
list-style: none;
}

.read_magazine{
float:left;
width:365px;
margin-bottom:10px;
padding-top:2px;
padding-bottom:2px;
background-color: #FFFFFF;
background-image: url(../img/magazine/icon_read.gif);
background-repeat: no-repeat;
background-position: left top;
}

.read_number{
float:left;
width:80px;
padding-top:7px;
background:url(../img/magazine/dot_page.gif) right no-repeat;
letter-spacing: 2px;
}

.read_01 a{
float:left;
text-indent:-7777px;
background:url(../img/magazine/btn_01.gif) no-repeat;
width:45px;
height:31px;
}

.read_02 a{
float:left;
text-indent:-7777px;
background:url(../img/magazine/btn_02.gif) no-repeat;
width:73px;
height:31px;
}

.read_03 a{
float:left;
text-indent:-7777px;
background:url(../img/magazine/btn_04.gif) no-repeat;
width:41px;
height:31px;
}
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

余分な部分もあるかもしれないですが、
ここまでです。

IEだと、
創刊号　あああああ　いいいいい　ううううう
と一列になる部分が、階段のように下がっていくような表示になります。
「あああああ」には１文字分のmargin-topが加算され
「いいいいい」には２文字分のmargin-topが加算され
「ううううう」には３文字分のmargin-topが加算されます。
文字の大きさを変えると、ズレも対応してちょうど一文字分のmargin-topが加算されます。
入れ子にしなければ大丈夫なのですが…。

どなたかアドバイスをいただる方がおりましたら
よろしくお願いします。

1 名前： K+S ： 2007/03/22（木） 14:23 ID:nROqylMa sub-YS

<ul class="read">
<li class="read_number">創刊号</li>
<ul>
<li class="read_01"><a href="01.html">あああああ</a></li>
<li class="read_02"><a href="02.html">いいいいい</a></li>
<li class="read_03"><a href="03.html">ううううう</a></li>
</ul>
</ul>

ul 要素の入れ子が不正です。
Firefox と Safari で上手くいくとは心外です…。
ul, ol, dl 直下に含めないものを含んでも、それなりの表示がされてしまうのが厄介なのですが。

実際にパースさせて確認していませんが、入れ子を適切にしてみるとどうなるでしょうか。

2 名前： esu ： 2007/03/22（木） 14:23 ID:4/N75WFT sub-Ds: ＞K+Sさん
ありがとうございます。
記述が不正である事に気づけませんでした。
申し訳ないです。でも勉強になりました。

入れ子を適切にしてみても、階段状態はなおりませんでした。
適正にしてもSafariとFirefoxはちゃんと一列になっています。
（少しcssをいじる必要が出ましたが。）

3 名前：匿名： 2007/03/22（木） 14:23 ID:6fAvcTJO sub-kJ

<ul>
  <li>創刊号
    <ul>
      <li><a href="01.html">あああああ</a></li>
      <li><a href="02.html">いいいいい</a></li>
      <li><a href="03.html">ううううう</a></li>
    </ul>
  </li>
</ul>

ul ul li {
  display: inline;
  white-space: nowrap;
}

4 名前： esu ： 2007/03/22（木） 14:23 ID:4/N75WFT sub-Ds: ＞匿名さん
ありがとうございます！
できました！
一人で考えていたら、分からなかった事だと思うので
本当に感謝したいです。ありがとうございます。