0
我一直在試圖讓這個html中的導航欄適合頁面，但我似乎無法得到它那樣做。它在一個容器內，然後在另一個div內，所以我懷疑這可能是問題所在，但我根本無法讓它起作用，如果我知道將來如何解決這個問題，這將是一大幫助。如何適應導航欄到頁面
HTML：
<html>
<head>
<LINK href="style.css" rel="stylesheet" type="text/css">
</head>
<title>Zurvo - Collaborative Research</title>
<body>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
<ul id="list-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- END: Page Content -->
</body>
</html>
CSS：
/* BEGIN: Header Style */
/* Reset body padding and margins */
body { margin:0; padding:0; background-color:
#F5F1DE; }
/* Make Header Sticky */
#header_container { background-color:#4682B4; border:1px solid #666; height:60px; left:0; position:fixed; width:100%; top:0; border-bottom: 2px solid #ced7df; }
#header{ line-height:60px; margin:0 auto; width:940px; text-align:center; }
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container { margin:0 auto; overflow:auto; padding:80px 0; width:940px; }
#content{}
/* Format Positions Of The Login Form */
.login {
position: relative;
margin: 0 auto;
padding: 20px 20px 20px;
width: 310px;
}
.container {
margin: 50px auto;
width: 640px;
}
.login p.submit {
text-align: right;
}
.login-help {
margin: 20px 0;
font-size: 11px;
color: 3399FF;
text-align: center;
text-shadow: 0 1px #2a85a1;
}
.login-help a {
color: #3399FF;
text-decoration: none;
}
.login-help a:hover {
text-decoration: underline;
}
:-moz-placeholder {
color: #c9c9c9 !important;
font-size: 13px;
}
::-webkit-input-placeholder {
color: #ccc;
font-size: 13px;
}
/* Design The Box */
.container {
position: relative;
top: 80px;
margin: 50px auto;
width: 640px;
}
.login:before {
content: '';
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
z-index: -1;
background: steelblue;
border-radius: 4px;
}
.login h1 {
margin: -20px -20px 21px;
line-height: 40px;
font-size: 15px;
font-weight: bold;
color: #555;
text-align: center;
text-shadow: 0 1px white;
background: #f3f3f3;
border-bottom: 1px solid #cfcfcf;
border-radius: 3px 3px 0 0;
background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
-webkit-box-shadow: 0 1px whitesmoke;
box-shadow: 0 1px whitesmoke;
}
.login p {
margin: 20px 0 0;
}
.login p:first-child {
margin-top: 0;
}
.login input[type=text], .login input[type=password] {
width: 278px;
}
.login p.remember_me {
float: left;
line-height: 31px;
}
.login p.remember_me label {
font-size: 12px;
color: white;
cursor: pointer;
}
.login p.remember_me input {
position: relative;
bottom: 1px;
margin-right: 4px;
vertical-align: middle;
}
/* Set The Navbar For Homepage Styling */
#content {min-height:1000px;width:300px;}
ul#list-nav {
position:relative;
bottom:39px;
margin:20px;
padding:0;
list-style:none;
width:800px;
}
ul#list-nav li {
display:inline
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#485e49;
color:#eee;
float:left;
}
ul#list-nav li a {
text-align:center;
border-left:1px solid #fff;
}
ul#list-nav li a:hover {
background:#a2b3a1;
color:#000
}
你可以更具體的你是什麼意思的「適合頁面」？你的意思是，適合導航欄寬度到頁面寬度？ – Banana 2014-09-21 13:22:37
是的！我正是這個意思。我很新的HTML/CSS，所以我忘記使用適當的條款。 – 2014-09-21 13:25:34