Question

更新 CSS文件：http://pastebin.com/v9sQPzez HTML文件：http://pastebin.com/pA9eMQnT

我在css中使用<nav>元素时出现问题。

我使用此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;
}

问题是，当我调整窗口大小时，最右侧的按钮消失，而不是显示水平滚动条，如下图所示，

enter image description here

当我调整镀铬窗口的大小时，

enter image description here

为什么我的浏览器没有显示水平滚动条并从导航菜单中删除按钮？

Answer 1

你最好设置身体标签的最小宽度，比如

body{
    min-width: 720px; /* or what ever you want */
    ...
}

＆＃13;

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

＆＃13;

<!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>&copy; Untitled. All rights reserved.</p>
	</footer>
	
</body>
</html>

＆＃13;

Answer 2

您将导航栏的宽度设置为100％。设置要设置的像素宽度。用这个替换导航代码并再次检查。

nav{
    background: #000000;
    height: 120px;
    width: 800px; // here set width whichever you want
}

当我调整窗口</nav>时，<nav>列表元素消失

2 个答案: