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;
}

這是它的樣子。 我知道它並不漂亮，但是我才開始學習CSS。 無論如何，當您上下滾動時，我希望酒吧停留在那里，所以我添加了position: fixed; 對ul。 這是發生了什么事。 我知道我必須設置寬度，但是在調整瀏覽器大小時，文本將不會居中。 請幫忙！

Answer 1

您或者還需要添加一個width （例如width: 100% ），或者可以使用left: 0; right: 0; 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>