※ ChatGPTを利用し、要約された質問です(原文:CSSでリスト横並び…そしてそれを中央へ その2)
CSSでリスト横並び…そしてそれを中央へ
このQ&Aのポイント
CSSでリストを横並びにしたが、中央に表示できない問題
最初はulタグを使用していたが、結果に変化がなかったため省略した
Firefoxではうまく行くが、IEでは左寄せ状態になる
すみません、つい先日同様の質問をし、良回答を得られたと早とちり締め切ってしまいましたが、まだ問題が続いてました。
以前の質問と回答
http://oshiete1.goo.ne.jp/kotaeru.php3?q=2335571
頂いた良回答は Firefox ではうまく行きましたが、IEだとやはりまだ左寄せ状態で表示されてしまいます。
その他頂いた回答はDOCTYPEを変えております、確かに中央に寄ったのですが、あのDOCTYPEですとIEとFirefoxで padding の捕らえ方が変わるため、できればあのDOCTYPEは使用したくはありません。
========= 以下、前質問より ============
CSSでリスト横並び…最近知った物ですが、問題が絶えません…。以下のようにして、CSSでリストを横並びにしたのは良いのですが、それを中央表示させたいため、ネットで色々と調べ、それを真似ているのですが、うまく中央へ表示されません。一体何が悪いのでしょうか?
最初は ul も利用していましたが、あるサイトのソースだと ul を利用していなかったので省いたところ、変化なかったので、省いたままにしています。
+++ CSS ソース +++
#smenu {
clear: both;
margin: 0 auto;
padding: 20px 0;
width: 900px;
height: 50px;
white-space: nowrap;
list-style-type: none;
text-align: center;
}
#smenu li {
float: left;
margin: 0 auto;
padding: 2px 10px;
text-align: center;
}
#smenu a {
display: block;
text-align: center;
}
+++ HTML ソース ++++
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<div id=smenu>
<li><a href="#">AAA</a></li>
<li><a href="#">BBB</a></li>
<li><a href="#">CCC</a></li>
</div>
よろしくお願いします。