-1

こんにちは、ナビゲーション メニューをウェブサイトの中央に配置しようとしています。誰か助けてもらえますか?

色などを変更する方法は知っていますが、ナビゲーションを中央に配置したことはありません

ありがとう

以下のコード:

/* Navigation
--------------------------------------------------------------------------------*/

#topnav {
clear: left;
margin: 0;
overflow: hidden;
}

#topnav ul {
list-style: none;
float: left;
}

#topnav ul li {
list-style: none;
float: left;
padding: 0 2px 0 0;
}

#topnav a {
float: left;
display: block;
color: #FFFFFF;
background: #00B0F0;
text-decoration: none;
font-family: "Actor", "Myriad Pro", Arial, Helvetica, sans-serif;
padding: 10px 15px 11px;
font-size: 15px;
border: 0;
outline: 0;
margin: 0;
list-style-type: none;
text-transform: uppercase;
line-height: 1;
}

#topnav li#active a,
#topnav a:hover {
color: #FFFFFF;
background: #00B0F0;
border: 0;
}

これは、ナビゲーションに関連する HTML コードです。

function initFlyouts(){initPublishedFlyoutMenus([{"id":"609790714960572849","title":"Home","url":"index.html"},{"id":"853266533690851204","title":"About us","url":"about-us.html"},{"id":"809862556966585268","title":"Pricing","url":"pricing.html"},{"id":"201576304336620950","title":"&#1593;&#1585;&#1576;&#1610;","url":"1593158515761610.html"}],'609790714960572849',"<li class='wsite-nav-more'><a href='#'>more...<\/a><\/li>",'active',false)}

と

<div id="topnav">
            <ul><li id='active'><a href='/index.html'>Home</a></li><li id='pg853266533690851204'><a href='/about-us.html'>About us</a></li><li id='pg809862556966585268'><a href='/pricing.html'>Pricing</a></li><li id='pg201576304336620950'><a href='/1593158515761610.html'>&#1593;&#1585;&#1576;&#1610;</a></li></ul>
            <div style="clear:both"></div>
        </div>
4

5 に答える 5

2

メニューで固定幅を使用したくない場合で、IE7 のサポートが必要な場合は、http: //jsfiddle.net/7K74B/1/を試すことができます。

この動作を実現する手順

  1. float:left;css 内のすべての参照を削除します (コンテンツが左にフロートするのを防ぐため - センタリングなし)

  2. display:block;from<a>タグを削除します (タグの幅が 100% になるのを防ぐため)。

  3. タグに設定display:inline;し<li>ます（並べて配置します）。

  4. に設定text-align:center;し<ul>て、最終的にメニューを中央に配置します!

お役に立てれば！

注: この解決策を使用する場合: すべてのfloat参照を削除したため、このマークアップも削除できます:<div style="clear:both"></div>クリアする float 要素がないため。

于 2013-04-29T11:22:13.317 に答える
0

これでうまくいくはずです。他の人があなたのコメントで言っていたように、HTML を見ないとこれが必要かどうかわからないということを心に留めておいてください。

/* Navigation
--------------------------------------------------------------------------------*/

#topnav {
clear: left;
margin: auto 0;
overflow: hidden;
width: 400px; /*Define your own width here*/
}
于 2013-04-29T11:12:58.357 に答える
0

垂直方向または水平方向の中央揃え? 水平の場合、この投稿の 2 番目の回答が役に立ちます。垂直の場合は、次のようなものを使用します:

li a {
 vertical-align:middle;
 text-align:center;
 display:table-cell;
}
于 2013-04-29T11:14:37.067 に答える
0

メニューが水平方向に中央に配置されたコードの改訂版を次に示します (幅は必要ありません)。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
#topnav {
clear: left;
margin: 0;
}

#topnav ul {
list-style: none;
overflow: hidden;
text-align: center;
margin:0; padding:0;
}

#topnav ul li {
list-style: none;
display: inline-block;
padding: 0 2px 0 0;
}

#topnav a {
float: left;
display: block;
color: #FFFFFF;
background: #00B0F0;
text-decoration: none;
font-family: "Actor", "Myriad Pro", Arial, Helvetica, sans-serif;
padding: 10px 15px 11px;
font-size: 15px;
border: 0;
outline: 0;
margin: 0;
list-style-type: none;
text-transform: uppercase;
line-height: 1;
}

#topnav li#active a,
#topnav a:hover {
color: #FFFFFF;
background: #00B0F0;
border: 0;
}
</style>

</head>
<body>

<div id="topnav">
    <ul>
        <li id='active'><a href='/index.html'>Home</a></li><li id='pg853266533690851204'><a href='/about-us.html'>About us</a></li><li id='pg809862556966585268'><a href='/pricing.html'>Pricing</a></li><li id='pg201576304336620950'><a href='/1593158515761610.html'>&#1593;&#1585;&#1576;&#1610;</a></li>
    </ul>
</div>

</body>
</html>
于 2013-04-29T11:28:22.293 に答える