3

シンプルなメニューがあり、css を使用してページの中央に配置したいと考えています。ここにメニューがあります：http://jsfiddle.net/kSV4K/4/

コード、CSS は次のとおりです。

ul#menu { margin:0; padding:0; list-style-type:none; }
ul#menu li { position:relative; float:left; border-bottom:4px solid #efefef; margin-right: 0px; padding-right: 0px; padding-bottom: 5px;}
ul#menu .current { border-bottom:4px solid #3d496a;}
ul#menu li:hover { border-bottom:4px solid #3d496a;}
ul#menu li a { padding:2px 2px; text-decoration:none; font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;}
ul#menu li a:hover { color:#8895b8; border:none; }

HTML:

<ul id="menu">
    <li class="current"><a href="#" data-id="div1">Description</a></li>
    <li><a href="#" data-id="div2">Shipping and payment</a></li>
    <li><a href="#" data-id="div3">Returns</a></li>
    <li><a href="#" data-id="div4">Feedback</a></li>
</ul>

助言がありますか？

4

2 に答える 2

4

フロートの代わりに、要素にインラインブロックを使用すると、ブロックに適用してli中央に配置できます。text-align: centerul

ul#menu {
    margin:0;
    padding:0;
    list-style-type:none;
    text-align: center;
}
ul#menu li {
    display: inline-block;
    border-bottom:4px solid #efefef;
    margin-right: 15px;
    padding-right: 20px;
    padding-bottom: 5px;
}

フィドルを参照してください: http://jsfiddle.net/audetwebdesign/kSV4K/3/

于 2013-06-12T15:07:11.980 に答える
1

また、メニューに幅を追加margin: 0 auto;して中央に適用することもできます。これはフィドルhttp://jsfiddle.net/xtatanx/swT4F/<nav>です。また、メニューをタグまたは内に含めることをお勧めします<div>。

于 2013-06-12T15:09:51.010 に答える