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を学び始めました。とにかく、上下にスクロールするとバーがそこにとどまっていたので、ulにposition: fixed;を追加しました。 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>