Question

我想通过我的导航栏上的导航栏和链接向您提供帮助。

我似乎无法让它出现在中心。使用填充是否能够修复它？我一直试图使用它，但我必须估算像素数。

我的第二个问题是我的底部导航栏没有正确的间距。我已经改变了字体大小，但它没有解决问题。现在，它看起来像这样：＆＃34; HomeWho我们做什么......＆＃34;。

我的第三个问题是我的某个链接似乎无法正常工作。它是我编码的另一个网页的链接。我想我已经正确输入了它，但它不会起作用。

这是一个小提琴： https://jsfiddle.net/captainpokey/66szogpm/

以下是代码：

＆＃13;

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

＆＃13;

<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&#39;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&#39;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 &copy; Powers and Grant, Inc. All Rights Reserved</div>
		</div>
	</div>
</body>

＆＃13;

请帮忙！非常感谢你提前。

Answer 1

我在这里进行了更改。

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，这是没有必要的。您所要做的就是将display属性更改为inline-block。

我没有为顶级导航改变它。但是，你可以尝试一下。

修复底部导航栏+固定链接到另一个网页

1 个答案: