-1

私は多くの方法を試しましたが、このメニューを中央に配置することはできません..何かアイデアはありますか?

ここでページを表示できます: http://jsbin.com/obecig/1/edit

#nav ul セレクターで text-align:center を試しましたが、うまくいきませんでした..

<html>
<head>
<style type="text/css">
#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; position:relative;}
#nav li ul.first {left:-1px; top:100%;}

li, li a {color:#000;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid;}
li:hover { position:relative; z-index:2000; }
</style>
</head>

<body>
<ul id="nav">
    <li>Menu 1
        <ul class="nav first">
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4</li>
        <ul>
    </li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>
</body>

</html>
4

4 に答える 4

1

幅を指定してから、水平マージンを自動に設定する必要があります。とにかくそれが一番手っ取り早いです。

これをcssに追加してください：

#nav
{
     width:100px;
     margin: 0 auto;
}
于 2012-10-31T16:15:42.097 に答える
0 
#nav{
 width:80px;
 margin: 0 auto;}
于 2012-10-31T16:18:47.993 に答える
0

何かを中央に配置するには、幅と margin: 0 auto が必要なので、次のコードを追加すると:

#nav { 
  width: 100px; 
  margin: 0 auto; 
}

それはうまくいくはずです（そして私にとってはうまくいきました）

于 2012-10-31T16:14:52.597 に答える