2

ウェブサイトのナビゲーション メニューを中央に揃えるのに助けが必要です。

これが私のコードです。どうしたの？メニューを中央に揃えません。

HTML

<div class="menu_nav">
    <ul style="font-family:Ubuntu">
        <li><a href="index.html">Home</a></li>
        <li><a href="activities.html">Activities</a></li>
        <li><a href="games.html">Games</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
</div>

CSS

.menu_nav {
    text-transform: uppercase;
    margin: 0 auto;

}
.menu_nav ul {
    list-style: none;
    margin: 0 auto;

}
.menu_nav ul li {
    margin: 0 auto;
    padding: 0 auto;

}
.menu_nav ul li a {
    display:block;
    margin: 0 auto;
    padding:35px 50px;
    color:#fff;
    text-decoration:none;
    font-size:20px;
}
4

2 に答える 2

3

text-align:centerがありません。

.menu_nav ul {
    list-style: none;
    margin: 0 auto;
    text-align:center;
}

フィドル: http://jsfiddle.net/84exq/

于 2013-08-28T20:10:05.810 に答える
1

何かをセンタリングするために使用margin: autoするには、センタリングする要素の幅を定義する必要があります。ピクセル、ポイント (pt)、em、またはパーセント値で定義できます。したがって、これを修正するには、次の CSS を使用する必要があります。

.menu_nav ul {
    list-style: none;
    margin: 0 auto;
    width: 85%;
}

また、リンクをインラインで表示するには、要素でdisplay: inline;プロパティを使用し、要素からプロパティliを削除します。display: blocka

.menu_nav ul li {
    margin: 0 auto;
    padding: 0 auto;
    display: inline;
}

jsfiddle here : 周囲の幅を定義していますが、ナビゲーションを含むdiv幅も定義していることに注意してください。ul

于 2013-08-28T20:10:33.897 に答える