更新: CSS 文件:http://pastebin.com/v9sQPzez HTML 文件:http://pastebin.com/pA9eMQnT
我的 <nav> 有问题css 中的元素。
我使用这个 css 创建了带有四个按钮的导航菜单，
nav{
background: #000000;
height: 120px;
width:100%;
}
nav ul {
margin: 0;
padding: 10px 0px 0px 0px;
text-align: center;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
letter-spacing: 2px;
padding: 20px 40px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-size: 1.80em;
border: none;
color: #000;
}
nav a:hover, nav .current a {
text-decoration: none;
}
nav .current a {
background: #008C9A;
}
问题是，当我调整窗口大小时，最右边的按钮消失了，而不是显示水平滚动条，如下图所示，
当我调整 chrome 窗口的大小时，
为什么我的浏览器不显示水平滚动条并从导航菜单中删除按钮？
最佳答案
你最好为 body 标签设置最小宽度，比如
body{
min-width: 720px; /* or what ever you want */
...
}
body {
min-width: 720px;
margin: 0px;
padding: 0px;
background: #fff;
color: #363636;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: 300;
}
h1 {
margin: 0;
padding: 0;
}
p {
line-height: 190%;
}
a {
color: #171717;
}
a:hover {
text-decoration: none;
}
/*********************************************************************************/
/* List Styles */
/*********************************************************************************/
ul.style1
{
margin: 0;
padding: 0;
list-style: none;
}
ul.style1 li
{
border-top: solid 1px #E5E5E5;
padding: 0.80em 0;
}
ul.style1 li:first-child
{
border-top: 0;
padding-top: 0;
}
ul.style2
{
margin: 0;
padding: 0;
list-style: none;
}
ul.style2 li
{
border-top: solid 1px #E5E5E5;
padding: 0.80em 0;
}
ul.style2 li:first-child
{
border-top: 0;
padding-top: 0;
}
/*********************************************************************************/
/* Heading Titles */
/*********************************************************************************/
#container {
width: 100%;
/* setting the left/right width to auto will center the content */
margin: 0px auto;
background: #FFFFFF ;
padding:10px 0px;
}
#container h2 {
text-transform: uppercase;
letter-spacing: 0.20em;
font-weight: 700;
font-size: 2em;
color: #00AABB;
}
/* ---------------------
for Header area
--------------------- */
header
{
background: #848484;
text-align: center;
}
header h1{
letter-spacing: 0.0em;
text-transform: uppercase;
font-size: 3em;
padding: 1.1em 0;
}
header a {
text-decoration: none;
color: #81BEF7;
}
header a:visited {
text-decoration: none;
color: #81BEF7;
}
nav{
background: #00AABB;
height: 90px;
width:100%;
}
nav ul {
margin: 0;
padding: 35px 0px 0px 0px; /* top right bottom left */
text-align: center;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
letter-spacing: 2px;
padding: 20px 40px; /* top/bottom and right/left */
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-size: 0.80em;
border: none;
color: #FFF;
}
nav a:hover, nav .current a {
text-decoration: none;
}
nav .current a {
background: #008C9A;
}
/** PAGE */
/*********************************************************************************/
/* footer */
/*********************************************************************************/
footer{
padding: 1em 0em;
text-align: center;
background: #424242;
/*position:absolute;*/
width:100%;
bottom:0px;
}
footer p{
letter-spacing: 0.20em;
text-align: center;
text-transform: uppercase;
font-size: 0.80em;
color: #6F6F6F;
}<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Widget Standards</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header>
<h1><a href="index.html">Test</a></h1>
</header>
<nav>
<ul>
<li class="current"><a href="#">Introduction</a></li>
<li><a href="#">Details</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">About Me</a></li>
</ul>
</nav>
<section id="container">
<h2>Integer sit amet aliquet</h2>
<p>This is <strong>Retention</strong>, a free, fully standards-compliant CSS template designed by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>. The photos in this template are from <a href="http://fotogrph.com/"> Fotogrph</a>. This free template is released under the <a href="http://templated.co/license">Creative Commons Attribution</a> license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you give us credit for it. Have fun :) </p>
<p>Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. </p>
</section>
<footer>
<p>© Untitled. All rights reserved.</p>
</footer>
</body>
</html>关于html - <nav> 列表元素在我调整窗口大小时消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29363773/