-2

何らかの理由で、多くの異なるコードを入力したにもかかわらず、次のコードがページの中央に表示されません。

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

@charset "utf-8";
/* CSS Document */

#nav {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter",       Monaco, "Courier New", monospace;
margin: 0 0 3em 0;
padding: 10px 50%;
list-style: none;
margin-left:auto;
margin-right:auto;
display: inline-block;
}
#nav li {
float: left;
}
#nav li a {
padding: 8px 15px;
text-decoration: none;
color:white;
display:inline-block;
font-size:18px;
}
#nav li a:hover {
color:#00BFFF;
}
#header {
margin-top: 0;
width:100%;
height:150px;
background-color:#09F;
}

ナビゲーション バーはヘッダーの内側にあることに注意してください。

4

2 に答える 2

0

jsFiddle

のdisplayプロパティを削除し<ul>て、幅を指定するだけです。リストにあったパディングも削除しました。

于 2013-03-12T22:44:12.660 に答える
0

で試してみてください

#nav {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter",           Monaco, "Courier New", monospace;
margin: 0 auto 3em;
width: XXpx
padding: 10px 50%;
list-style: none;
margin-left:auto;
margin-right:auto;
display: inline-block;
}

幅を定義します

編集：

function onload() {
document.getElementById("nav").style.marginLeft = Math.round(document.getElementById("nav").offsetWidth/2)+"px";}
于 2013-03-12T22:36:09.473 に答える