- ベストアンサー
CSSでリストを横並びにして中央表示させる方法とは？
- CSSでリストを横並びにする方法と中央表示させる方法を教えてください。
- ulタグを利用せずにリストを横並びにする方法を教えてください。また、リストを中央に表示させる方法も知りたいです。
- CSSを使用してリストを横並びにし、かつ中央に表示させる方法を教えてください。
- umizaru76jp
- お礼率35% (13/37)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <!--文字コードに関するmeta要素を思いっきり省略しているが本来は入れるべき--> <title>実験</title> <style> #smenu { clear: both; margin: 0 auto; padding: 20px 0; width: 900px; height: 50px; white-space: nowrap; text-align: center; background-color:red; } #smenu ul { margin:0 auto; background-color:green; } #smenu ul li { float: left; margin: 0 auto; padding: 2px 10px; text-align: center; list-style-type: none; width:30%; background-color:purple; } #smenu a { display: block; text-align: center; } </style> </head> <body> <div id="smenu"> <ul> <!--ul要素はないとだめ--> <li><a href="#">AAA</a></li> <li><a href="#">BBB</a></li> <li><a href="#">CCC</a></li> </ul> </div> <p>あんまり詳しく考えてないがこんな感じか？</p> </html>
その他の回答 (1)
- suzuko
- ベストアンサー率38% (1112/2922)
これではどうでしょう？ =====css====== /*ヘッド*/ #smenu { margin: 0px auto; padding: 20px 0px; width: 900px; height: 50px; white-space: nowrap; text-align: center; } #smenu ul { padding: 0px; list-style-type: none; border: 0px; } #smenu li { float: left; margin: 0px auto; padding: 2px 10px; text-align: center; display: block; } #smenu a { display: block; } =====html======= <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>＊＊＊＊＊</title> <link href="＊＊.css" rel="stylesheet" type="text/css" media="screen,print"/> </head> <body> <div id="smenu"> <ul> <li><a href="#">AAA</a></li> <li><a href="#">BBB</a></li> <li><a href="#">CCC</a></li> </ul> </div> <div style="clear: both;"></div>
お礼
やはり UL は必要でしたか…。 上の通りやったら、出来ました。 UL 要素に不要な物が入っていたために、うまく行かなかったみたいです…。 どうもありがとうございました。