我正在制作一个简单的垂直菜单，效果很好。我可以调整浏览器的大小，文本将保持居中。这是代码：
/*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。这就是发生的事情。我知道我必须设置一个宽度，但是当浏览器调整大小时，文本将不会保持居中。请帮忙！
您还需要添加一个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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句