我想请求您帮助我的底部导航栏和两个导航栏上的链接。
我好像不能让它出现在中心。使用填充能够修复它吗？我一直在尝试使用它，但我必须估计像素数。
我的第二个问题是我的底部导航栏没有正确的间距。我已经更改了字体大小，但并没有解决问题。现在，它看起来像这样:“HomeWho We AreWhat We Do...”。
我的第三个问题是我的其中一个链接似乎不起作用。这是我编码的另一个网页的链接。我想我输入的是正确的，但它不起作用。
这是一个 fiddle : https://jsfiddle.net/captainpokey/66szogpm/
代码如下:
html {
100%
}
body {
background: #cecdcc;
margin: 0;
padding: 0;
color: #8c8b8a;
font-size: 18px;
font-family: "Lato", sans-serif;
}
#wrap {
background-color: #fff;
width: 1000px;
margin: 0 auto;
}
#nav {
width: 1000px;
height: 45px;
background: #dcdbda;
font-family: "Lato";
font-size: 18px;
}
#nav ul {
padding: 0;
margin: 0;
background: #dcdbda;
float: left;
margin-left: 50px;
}
#nav li {
height: 40px;
padding-top: 4px;
float: left;
position: relative;
width: 150px;
list-style: none;
}
#nav a {
display: block;
text-decoration: none;
text-align: center;
color: #949392;
}
#nav ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
margin: 0;
padding: 0;
}
#nav li:hover, #nav li:hover li {
background: #fff;
}
#nav li li:hover, #nav li li:hover li {
background: #bbb;
}
#nav li:hover ul {
visibility: visible;
}
#header {
width: 1000px;
height: 485px;
background-image: url(../images/headerphoto.jpg);
}
#content {
background-color: #fff;
font-family: "Lato", sans-serif;
color: #777674;
padding-top: 10px;
padding-bottom: 20px;
}
#content h4 {
padding-left: 150px;
padding-right: 150px;
font-family: "Lato", sans-serif;
font-size: 20px;
text-transform: bold;
}
#content p {
padding-left: 150px;
padding-right: 150px;
font-family: "Lato", sans-serif;
font-size: 18px;
text-transform: bold;
}
#footer {
background-image: url(../images/footerphoto.jpg);
width: 1000px;
height: 255px;
}
#navbottom {
padding-left: 130px;
width: 1000px;
color: #fff;
font-size: 12px;
font-family: "Lato";
}
#navbottom ul {
padding: 0;
margin: 0;
float: left;
margin-left: 20px;
margin-right: 20px;
}
#navbottom ul li {
float: left;
position: relative;
list-style-type: none;
}
#navbottom li:hover ul {
visibility: visible;
}
#navbottom a {
display: block;
text-decoration: none;
text-align: center;
color: #fff;
}
#copyright {
padding-left: 150px;
padding-right: 150px;
font-family: "Lato", sans-serif;
font-size: 16px;
}<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<title>Powers & Grant, Inc.</title>
<meta charset="utf-8">
</head>
<body>
<div id="wrap">
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="whoweare.html">Who We Are</a></li>
<li><a href="whatwedo.html">What We Do</a></li>
<li><a href="ourservices.html">Our Services</a></li>
<li><a href="thepowersteam.html">The Powers Team</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="header"></div>
<div id="content">
<p>As the Country's pioneer in sales force outsourcing, Powers knows the intricacies of managing the critical tasks involved in increasing revenues as well as saving the company from the costly maintenance of agents with minimal increase in sales growth.<br><br>
Powers and Grant Inc. currently handles and manages sales teams for various industries principally involved in the Real Estate, Consumer, and
Pharmaceutical and Direct Selling companies.<br><br>
We assist companies in enhancing their competitiveness through application of competencies and integrate these essential factors needed to survive
today's need for continued innovation.<br><br></p>
</div>
<div id="footer">
<div id="navbottom">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="whoweare.html">Who We Are</a></li>
<li><a href="whatwedo.html">What We Do</a></li>
<li><a href="ourservices.html">Our Services</a></li>
<li><a href="thepowersteam.html">The Powers Team</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><br>
<div id="copyright">Copyright © Powers and Grant, Inc. All Rights Reserved</div>
</div>
</div>
</body>求助!非常感谢你提前。
最佳答案
我已经在此处进行了更改。
https://jsfiddle.net/66szogpm/1/
将顶部导航文本居中对齐的代码
#nav li {
line-height: 40px;
float: left;
position: relative;
width: 150px;
list-style: none;
}
对齐底部导航的代码
#navbottom {
padding-left: 100px;
width: 1000px;
color: #fff;
font-size: 14px;
font-family: "Lato";
margin: 0 auto;
}
#navbottom ul {
padding: 0;
margin: 0;
margin-left: 20px;
margin-right: 20px;
}
#navbottom ul li {
display: inline-block;
position: relative;
list-style-type: none;
margin: 5px 10px;
}
你已经在很多地方使用了 float: left ，这是没有必要的。您所要做的就是将显示属性更改为内联 block 。
我没有为顶部导航更改它。但是，您可以尝试一下。
关于html - 修复底部导航栏+修复指向另一个网页的链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29744084/