0

私はHTMLとCSSにかなり慣れていません。メニューバーを水平にしていますが、画面の中央に揃えられないようです。私は試しmargin:0 auto;まし<body align=center>たが、どちらもうまくいかないようです。

これが私のコードです：

<html>
<head>

<style>

#menu {
margin:0 auto;
float:left;
list-style:none;
padding:0;
border-top:1 solid #ccc;
border-left:1 solid #ccc;
border-bottom:1 solid #ccc;
}

#menu li {
float:left;
background-color:#f2f2f2;
}

#menu li a {
display:block;
padding:10px 80px;
text-decoration:none;
color:#069;
border-right:1px solid #ccc;
font-weight:bold;
}   

#menu li a:hover {
color:#c00;
background-color:#fff;
}

</style>

</head>

<body>

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Donate</a></li>
</ul>

</body>
</html>

ご覧のとおり、私はを使用しmargin:0 auto;ていますが、機能しません。

4

4 に答える 4

2

あなたにはfloat要素があります。コンテナがブロックまたはインラインブロックとして扱われない限り、フローティング要素はそのセンタリングに従いません。

目的の結果を得るには、この例のようなことを行います。

コンテナを追加することで、マージンを中央display: inline-blockに配置し、#menuそれらを使用すると、通常のコンテンツのように中央に配置されます。これはIEでは機能しない可能性があることに注意してください。その場合は、で行を追加する必要があります*display: inline;。

例| コード

HTML

<div class='container'>
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Donate</a></li>
    </ul>
</div>

CSS

.container{
    text-align: center;
    width: auto;
    margin: 0 auto;
}

#menu {
    margin:0 auto;
    display: inline-block;
    list-style:none;
    padding:0;
    border-top:1 solid #ccc;
    border-left:1 solid #ccc;
    border-bottom:1 solid #ccc;
}

#menu li {
    float: left;
    background-color:#f2f2f2;
}

#menu li a {
    display:block;
    padding:10px 10px;
    text-decoration:none;
    color:#069;
    border-right:1px solid #ccc;
    font-weight:bold;
}   

#menu li a:hover {
    color:#c00;
    background-color:#fff;
}
于 2012-04-04T16:01:02.160 に答える
1

メニューを親要素（この場合は本体）の中央に配置する場合は、メニューに幅を指定します。さらに、フロートを削除します。一方向または別の方向にフローティングしている場合、メニューは中央に配置されません。

于 2012-04-04T15:56:11.917 に答える
0

あなたはあなたに幅を与えてmenu削除する必要がありますfloat:left

例えば。

#menu {
margin:0 auto;    
list-style:none;
padding:0;
border-top:1 solid #ccc;
border-left:1 solid #ccc;
border-bottom:1 solid #ccc;
width:900px;
display:block;
}
于 2012-04-04T16:01:10.617 に答える
0

メニューに幅width: 400px;または希望の幅を指定できます。次に、左右の余白を自動に設定できますmargin-left: auto; margin-right: auto;

于 2012-04-04T15:56:55.823 に答える