CSSでリスト横並び…そしてそれを中央へ

2023/08/03 14:31

このQ&Aのポイント

CSSでリストを横並びにしたが、中央に表示できない問題
最初はulタグを使用していたが、結果に変化がなかったため省略した
Firefoxではうまく行くが、IEでは左寄せ状態になる

ベストアンサー

CSSでリスト横並び…そしてそれを中央へ　その2

2006/08/13 06:51

すみません、つい先日同様の質問をし、良回答を得られたと早とちり締め切ってしまいましたが、まだ問題が続いてました。以前の質問と回答 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> よろしくお願いします。

umizaru76jp
お礼率35% (13/37)

HTML
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ra_ra_ra
ベストアンサー率36% (37/102)

2006/08/13 12:53 回答No.1

htmlはそのままで、cssを #smenu { clear: both; width: 900px; height: 50px; list-style-type: none; text-align: center; } #smenu li { display: inline; text-align: center; } #smenu a　{ display: block; text-align: center; } ではどうでしょう？

関連するQ&A

CSSでリスト横並び…そしてそれを中央へ
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> よろしくお願いします。
- ベストアンサー
- HTML
横並びのリストで左端がはみ出る
リストを横並びにしてメニューバーを作ろうとしているのですが、CSSの参考書に書いてある通りにHTMLとCSSを書いても、添付ファイルのように、どうしても左端がはみ出てしまいます。（この例ではわかりやすいようにli要素の左にボーダーを入れています） index.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>TITLE</title> <link href="nav.css" rel="stylesheet" type="text/css"> </head> <body> <ul class="nav"> <li class="nav_item"><a href="index.html">ホーム</a></li> <li class="nav_item"><a href="#">リンク１</a></li> <li class="nav_item"><a href="#">リンク２</a></li> </ul> </body> nav.css .nav { display: table; width: 100%; table-layout: fixed; padding-top: 10px; padding-bottom: 10px; background-color: #dddddd; } .nav_item { display: table-cell; border-left: thick solid #000000; } .nav_item > a { display: block; list-style-type: none; text-decoration: none; text-align: center; } どのブラウザで確認しても同じ現象です。どうやったら正常に表示されるのか、おわかりになれば教えてください。
- ベストアンサー
- CSS
CSSを用いてリストを横並びにして、それを2行にまたがせる方法
CSS を用いて、リストを横並びにしたのはいいのですが、そのリストの数が多く、2行にまたがらざるを得ません。 Firefox ですと枠内に入りきらないリストは自動的に改行して表示してくれるのですが、IE ですと入りきらないリストを右端に無理矢理表示（縦に伸びていきます）し、そのリストの次から2行目と移り変わります。 -- HTML -- <div id=content> <ul> <li><a href="">AAA</a></li> <li><a href="">BBB</a></li> <li><a href="">CCC</a></li> <li><a href="">DDD</a></li> <li><a href="">EEE</a></li> <li><a href="">FFF</a></li> </ul> </div> -- CSS -- #content ul　{ padding: 0; margin: 0; list-style-type: none; } #content li　{ float: left; display: block; padding: 2px 10px 0 5px; margin: 0; list-style-type: none; } 上記の例ですとEEEが1行目に入りきらない場合、Firefox では、EEEが2行目へとなって後が続きます。 IEですと EEE のうち E 1文字だけでも入ると残りの2文字は下方へずれて行きます。そして、FFFから2行目となります。このIEでの不具合で良い解決法があれば、ご教授願います。よろしくお願い致します。
- ベストアンサー
- HTML
CSS 横並びリストの書き方はどちらがよいでしょうか
スタイルシートで横並びリストを作成するとき、li { display: inline; } を使う方法と、li { display: block; float:left; } を使う方法がありますよね。皆さんは、意識して、使い分けられていますか？どちらで表現しようか、よく迷います。どちらの方法でも同じレイアウトにできるように思ってしまっていて。。でも自分の気付いていないデメリットがあるのかな？と気になります。「こうしたい場合、こちらのレイアウトだと無理」とか、「これではこのブラウザで表示が崩れる」など、お気づきのことがあれば、教えていただけないでしょうか。下に、自分で確認用に作ったhtmlがあるので、そのままブラウザで見ていただければと思います。お手数ですが、よろしくお願いします。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>横並びサンプル</title> <style type="text/css">  </style> </head> <body> <div id="yoko1"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> <div id="yoko2"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> </body> </html>
- ベストアンサー
- HTML
HTML&CSSで「横並び」にする方法
最近、独学でプログラミングを学び始めた初心者です。知識が浅く、HTML&CSSで「メニューリストを横並びにする」にする方法がわかりません。詳しい方がいたら教えてください。・HTMLでは <h1 id="logo"><a href="index.html"><img src="images/logo1.png"width="400"height="200"alt="KUJIRA cafe"</a></h1> <ul id="nav"> <li><a href="index.html">ホーム</a></li> <li><a href="about.html">店舗案内</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="menu.html">メニュー</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> ・CSSでは、 #nav li { display: inline; list-style-type: none; padding-right: 30px; } と書いたのですが「横並び」になりません。何が間違っているのでしょうか？これだけの情報だと回答が難しいかもしれませんが、非常に困っております。よろしくお願いします。
- ベストアンサー
- HTML
cssでリストを横並びのセンタリング
現在、サイトをHTMLからHTML5に移行中なのですが、リストを横並びにするところまではできたのですが、それをセンタリングするにはどうしたら良いでしょうか？さまざまなサイトを巡ってやり方を拝見したのですが、目的とするものがありませんでした。現在のHTML  <div id="header"> <h1>サイトタイトル</h1> <p class="catch"><strong>サイト説明</strong></p> <div class="opening"> <h2><img src=".jpg" alt="表示されなかった画像の説明的な" width="900" height="260"></h2> </div> <ul class="nl clearFix"> <li class="active"><a href="#">１</a></li> <li><a href="#">２</a></li> <li><a href="#">３</a></li> <li><a href="#">４</a></li> <li><a href="#">５</a></li> <li><a href="#">６</a></li> <li><a href="#">７</a></li> </ul> <hr class="none"> </div>  現在のcss /* --- ヘッダメニュー --- */ #header ul.nl { width: 100%; /* IE 6のために幅の指定が必要 */ margin: 0 auto; padding: 0; background-color: #ffffff; /* ヘッダメニューの背景色 */ list-style-type: none; text-align: center; } /* メニュー項目 */ #header ul.nl li { width: 124px; /* 項目の幅 */ float: left; line-height: 100%; } /* 最初の項目と最後の項目 */ #header ul.nl li.first, #header ul.nl li.last { width: 125px; /* 項目の幅 */ } わかりにくいと思いますが、上のように配置したいのです。まだイマイチ理解しきれていないのですが、回答していただければと思います。 ↓HPの現状。 http://dateme.web.fc2.com/top.html
- ベストアンサー
- CSS
safariでの横並びリスト（List）CSSずれについて
CSSマスターの方にご質問させていただきます。現在横並びリストを制作しようとしております。リストに表示する文字の高さを中央揃えにし、カーソルが触れるまでは黒色画像、hover時に赤色画像のバックグラウンドをマイナス設定にてロールオーバー効果を演出しようとしています。 IEではきちんと表示されているのですがsafariではパディング分、赤色がズレてしまい、hover時には黒色がズレてしまいます。 <UL id="sitemenu"> <LI id="side">あいうえお <LI id="side">かきくけこ </UL> /***********LI設定***********/ #side A{ width:60px;　//幅 height:40px;　//高さ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; background-image : url(背景.gif);　//背景 background-position : 0px 0px; no-repeat; text-align : center; //文字の位置 text-decoration : none;　//文字飾り vertical-align : top;　//文字の高さ padding-top : 10px;　//パディング高さ float : left; } #side A:hover{ background-position : 0px -40px; no-repeat; } /***********UL設定***********/ #sitemenu{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; border-width : 0px 0px 0px 0px; vertical-align : top; text-align : left; list-style-type : none; float : left; } #sitemenu LI{ float : left; } なんとか背景画像がずれない様に表示させていので、どなたかわかる方がいらっしゃいましたら大変申し訳ないのですがご教授お願いいたします。
- ベストアンサー
- HTML
「横並び」にする方法→HTML&CSS
HTMLでは、 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>KUJIRA cafeへようこそ</title> <link rel="stylesheet" type="text/css "href="css/style.css"> </head> <body> <div class="wrapper">  <h1 id="logo"><a href="index.html"><img src="images/logo1.png"width="400"height="200"alt="KUJIRA cafe"</a></h1> <ul id="nav"> <li><a href="index.html">ホーム</a></li> <li><a href="about.html">店舗案内</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="menu.html">メニュー</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> CSSでは #nav li { 　　　　display:inline; 　　　　list-style-type: none; 　　　　padding-right: 30px; } と書きましたが「横並び」になりません。何が間違っているのでしょうか？非常に困っております。回答よろしくお願いします。
- ベストアンサー
- HTML
CSSのリスト表示
リストの表示ですが、li a　で上下と左にpaddingを入れたいです。 IEではOKなのですが、Firefoxでは右に背景色が飛び出てしまいます。どこを直したら良いでしょうか。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> で組んでいます。 #category { width: 180px; float: left; } #categoryt ul { border-top: 1px solid #999999; } #category li { border-bottom: 1px solid #999999; } #category li a { display: block; width : 100%; padding: 5px; background-color: #F6F6F6; text-decoration:none; color: #000033; } #category a:hover { background-color: #DBE7EE; color: #003366; } --------------------- <div id="category"> <ul> <li><a href="#">AAA</a></li> <li><a href="#">BBB</a></li> </ul> </div>
- ベストアンサー
- HTML
CSSで画像１枚によるロールオーバー
CSSの勉強をしているのですが、Fire Fox2.0ではうまく表示されるのに対し、IE6,7では何も表示されず困っています。どこが間違っているのか教えて頂けませんでしょうか？よろしくお願い致します。作っている物は以下の通りです。（すべて同じ階層にあります） --------------------------------------------------------------- navi.gif(100*30のメニューが横3縦2で300*30の１枚の画像) --------------------------------------------------------------- list.html（とりあえずメニュー１つだけです） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>リストお勉強</title> <link href="list1.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="globalnavi"> <ul> <li id="btn01"><a href="#">リスト１</a></li> </ul> </div> </body> </html> --------------------------------------------------------------- list.css /* CSS Document */ .globalnavi { width:300px; height:30px; margin:0px; padding:0px; text-align:left; } .globalnavi ul { margin:0px; padding:0px; } .globalnavi li { display:block; list-style-type:none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li a { display:block; list-style-type::none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li#btn01{ width:100px; background-position:0 0; } .globalnavi li#btn01 a{ width:100px; } .globalnavi li#btn01 a:hover{ width:100px; background-position: 0 -30px; }
- ベストアンサー
- HTML