CSS水平菜單不居中位置固定

Question

我正在做一個簡單的垂直菜單，它工作正常。我可以調整瀏覽器的大小，文本將保持居中。下面的代碼：

/*CSS Reset*/ 
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 

} 

nav a { 
    text-decoration: none; 
    color: red; 
    background-color: green; 
    display: inline; 
    font-size: 2em; 
    border: black 1px solid; 
    border-radius: .2em; 
    padding: .01em; 

} 

nav li { 
    display: inline; 
    padding: .5em; 

} 

nav ul { 
    background-color: green; 
    text-align: center; 
    vertical-align: center; 

} 

a:hover { 
    color: black; 
    background-color: grey; 
    border: none; 
} 

Here's what it looked like. 我知道這是不是漂亮，但我剛開始學習CSS。無論如何，我希望酒吧留在那裏，因爲你上下滾動，所以我加了position: fixed;到ul。 This是發生了什麼事。我知道我必須設置寬度，但是當瀏覽器調整大小時，文本不會保持居中。請幫忙！

Answer 1

您或者還需要添加width（如width: 100%），或者您可以使用left: 0; right: 0;將菜單拉伸到窗口的寬度。

/*CSS Reset*/ 
 
html, body, div, span, applet, object, iframe, 
 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
 
a, abbr, acronym, address, big, cite, code, 
 
del, dfn, em, img, ins, kbd, q, s, samp, 
 
small, strike, strong, sub, sup, tt, var, 
 
b, u, i, center, 
 
dl, dt, dd, ol, ul, li, 
 
fieldset, form, label, legend, 
 
table, caption, tbody, tfoot, thead, tr, th, td, 
 
article, aside, canvas, details, embed, 
 
figure, figcaption, footer, header, hgroup, 
 
menu, nav, output, ruby, section, summary, 
 
time, mark, audio, video { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 

 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    color: red; 
 
    background-color: green; 
 
    display: inline; 
 
    font-size: 2em; 
 
    border: black 1px solid; 
 
    border-radius: .2em; 
 
    padding: .01em; 
 
} 
 

 
nav li { 
 
    display: inline; 
 
    padding: .5em; 
 
} 
 

 
nav ul { 
 
    background-color: green; 
 
    text-align: center; 
 
    vertical-align: center; 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
a:hover { 
 
    color: black; 
 
    background-color: grey; 
 
    border: none; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#">asdf</a></li> 
 
    <li><a href="#">asdf</a></li> 
 
    <li><a href="#">asdf</a></li> 
 
    </ul> 
 
</nav>