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>