gpt4 book ai didi

html - 如何使导航栏适合页面

转载 作者:行者123 更新时间:2023-11-28 09:24:03 28 4
gpt4 key购买 nike

我一直在尝试让此 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
}

最佳答案

list-nav 的总宽度为 840px 可用空间 (.container) 为 640px。放不下。

尝试

ul#list-nav {
position:relative;
bottom:39px;
margin:20px;
padding:0;
list-style:none;
/* replace this line width:800px; */
width:600px; /* plus margin left 20px, margin right 20px ... 640px */
}

没有人可以复制,因为页面不完整。我假设您删除了结束标签以压缩问题,但这也意味着每个人都必须假设不合适的意思。

关于html - 如何使导航栏适合页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25959605/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com