アプリ版：「スタンプのみでお礼する」機能のリリースについて

半角文字を使用してリスト表示をするとレイアウトが崩れてしまう

解決済

  • 質問者：leobank
  • 質問日時：
  • 回答数：2件

--------------------------------
//htmlコード

<div id="hoge">
　<ul>
　　<li>あああ</li>
　　<li>いいい</li>
　　<li>ううう</li>
　　<li>えええ</li>
　　<li>おおお</li>
　</ul>
</div>

--------------------------------
//cssコード

#hoge ul {
　　　　margin: 0px;
　　　　padding: 0px;
　　　　list-style-type: none;
　　　　width: 500px;
}
#hoge li {
　　　　width: 33%;
　　　　float: left;
}
---------------------------------

上記コードで出力をすると以下のように出力されます。

あああ　　いいい　　ううう
えええ　　おおお

しかし、例えばここで
<li>いいい</li> に半角文字を使用して <li>いいいi</li> の様に変更すると

あああ　　いいいi　　ううう
　　　　　　　　　 　　　えええ
おおお

とレイアウトが崩れて表示されてしまいます。
Firefoxでは問題なく表示されますが、IEでこのような現象がおきてしまいます。

これはどういった原因が考えられるのでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1

  • 回答者： kuzumiHK
  • 回答日時：

line-heightを設定すると直りそうです。

    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございました。
<li>にline-heightプロパティを設定したところ、問題を解消することができました。

通報する
お礼日時：2008/07/14 16:55

No.2ベストアンサー

  • 回答者： sumamoya
  • 回答日時：

ＩＥは不具合が多数あることから、そういったミスをブラウザがよみとるのでしょう。





---css---------------------------------------
#hoge ul {
　　　　margin: 0px;
　　　　padding: 0px;
　　　　list-style-type: none;
　　　　width: 500px;

}
#hoge li {
　　　　width: 33%;
　　　　float: left;
　　　　height: 23px;
}


---html---------------------------------------


<body>
<div id="hoge">
　<ul>
　　<li>あああ</li>
　　<li>いいい</li>
　　<li>ううう</li>
　　<li>えええ</li>
　　<li>おおお</li>
　</ul>
</div>
</body>



このように指定してみてはどうでしょうか。

heightを加えることで文字全体の高さを指定できます。

今は23pxにしていますがお好みの高さに変更していただいておｋです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

詳しい回答ありがとうございました。
heightプロパティで問題を解消することができました。
また、先回答者のline-heightプロパティでも可能でした。

シェアトップのIEにバグが多くあるのは皮肉な話ですよね。
ページを作成する際、IEを考慮して作るのもなかなか面倒ですしはやく標準化してほしいですね。

通報する
お礼日時：2008/07/14 17:17

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報