70

次のように、リストで表されるフッターに一連のリンクを含めるのが一般的です。

<div id="footer">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

div#footer 内のすべてを水平方向に中央揃えにしたい。それが段落の場合は、次のように簡単に言うことができますp { text-align: center; }。または、の幅を知っていれば、<ul>と言うことができます#footer ul { width: 400px; margin: 0 auto; }。

しかし、固定幅を設定せずに、順序付けられていないリスト項目を中央に配置するにはどうすればよいでしょ<ul>うか?

編集: 明確化 - リスト項目は、下ではなく、互いに隣り合わせにする必要があります。

4

6 に答える 6

165

リスト項目がdisplay: inline非常に簡単な場合の解決策は次のとおりです。

#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }

ただし、何度も使用する必要がありdisplay:blockます<li>。この場合、次の CSS が機能します。

#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }
于 2009-11-08T02:42:08.167 に答える
34

以下のCSSを使用して問題を解決してください

#footer{ text-align:center; height:58px;}
#footer ul {  font-size:11px;}
#footer ul li {display:inline-block;}

注float:left: liでは使用しないでください。それはあなたのliを左に揃えるようにします。

于 2012-11-20T05:37:13.510 に答える
12

もう1つの解決策：

#footer { display:table; margin:0 auto; }
#footer li { display:table-cell; padding: 0px 10px; }

次に、テキストをズームする場合、ul は次の行にジャンプしません。

于 2013-02-14T16:48:48.360 に答える
8

リスト項目が前のものより下にあるか、前のものの右にあるかによって異なります。つまり、次のようになります。

Home
About
Contact

また

Home | About | Contact

あなたが簡単にできる最初のもの：

#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }

2番目は次のように行うことができます：

#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline; }
#footer a { padding: 2px 12px; background: orange; text-decoration: none; }
#footer a:hover { background: green; color: yellow; }
于 2009-11-08T02:59:45.607 に答える
2

リストを div でラップして、その div にリストの代わりにインライン プロパティを指定してみてください。

于 2009-11-08T02:44:18.820 に答える
0

philfreo の答えは素晴らしく、完全に機能します (クロスブラウザー、IE 7 以降)。li 内のアンカー タグに私の exp を追加するだけです。

#footer ul li { display: inline; }
#footer ul li a { padding: 2px 4px; } /* no display: block here */

#footer ul li { position: relative; float: left; display: block; right: 50%; }
#footer ul li a {display: block; left: 0; }
于 2013-05-14T04:47:28.410 に答える