入れ子<ul>を一列に表示

[新着] Webテンプレートを仮オープンしました



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だと、
創刊号 あああああ いいいいい ううううう
と一列になる部分が、階段のように下がっていくような表示になります。
「あああああ」には1文字分のmargin-topが加算され
「いいいいい」には2文字分のmargin-topが加算され
「ううううう」には3文字分の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
>匿名さん
ありがとうございます!
できました!
一人で考えていたら、分からなかった事だと思うので
本当に感謝したいです。ありがとうございます。

一覧へ戻る