Question

因此，我正在研究导航栏，该导航栏应水平对齐，但不会。如果我尝试使用

display: inline-block;

然后

float: left;

导航栏与我的其他部门冲突

这是我的代码： http://jsfiddle.net/0p287vmb/

Answer 1

您应该从导航标签中删除宽度。

* {
   font-family: Verdana;
   font-size: 14px;
   margin: 0;
}

p {
   padding 20px;
}

#wrapper {
   width: 900px;
   background-color: #ff3333;
   margin: auto;
}

header {
   background-color: #00c9fd;
   width: 900px;
}

nav {
   background-color: #cccccc;
   width: 900px;
}

a {
   font-family: Impact;
   font-size: 15px;
   color: black;
   text-decoration: none;
   text-align: center;
   line-height: 50px;
   margin: 0px;
   padding: 5px 10px;
   float: left;
}

nav,
a:hover {
   background-color: white;
   display: inline-block;
}

#bigimage {
   width: 900px;
}

#bigimage,
p {
   color: #00c9fd;
   background-color: #ffffff;
   font-size: 12px;
}

main {
   width: 900px;
}

article {
   background-color: #cccccc;
   width: 900px;
}

#contact {
   background-color: #cccccc;
   width: 900px;
}

footer {
   background-color: #00c9fd;
   width: 900px;
}

header,
h1 {
   padding: 20px 0px 5px 0px;
   color: rgb(255, 255, 255);
   font-size: 30px;
   font-family: Impact;
   text-weight: normal;
}

<!DOCTYPE html>
<html>

<head>
	<link rel="stylesheet" type="text/css" href="style_new.css">
</head>

<body>
   <div id="wrapper">
      <header>
	    <h1>SUPERCOMPUTERS</h1>
      </header>
	  <nav>
			<a href="http://www.pbruinaars.ictlaurens.nl/opdrachtje/new.html">Home</a>
			<a href="http://www.pbruinaars.ictlaurens.nl/opdrachtje/new.html">Meer informatie</a>
			<a href="http://www.pbruinaars.ictlaurens.nl/opdrachtje/new.html">Tijdlijn</a>
	  </nav>
		<div id="bigimage">
			<img src="images/titanadfacomputer.jpg" alt="Titan 2 Supercomputer" width="900">
			<p>
				<b>Lorem</b> <br> ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis turpis sit amet blandit malesuada. Praesent at lacus rutrum, auctor justo sed, consectetur massa. Cras gravida vehicula vulputate. Ut magna odio, mollis non dolor
				at, dignissim faucibus eros.
			</p>
		</div>
		<main>
			<article>hoi1</article>
			<article>hoi2</article>
			<article>hoi3</article>
		</main>
		<div id="contact">hoi4</div>
		<footer>hoi5</footer>
   </div>
</body>

</html>

Answer 2

那是因为您要覆盖导航栏中的宽度

nav,
a {
    ...
    width: 200px;
    ...
}

和此处的显示块：

nav,
a:hover {
    background-color: white;
    display: inline-block;
}

只需将导航栏样式移动到nav，a：hover ...之后，然后从同一位置删除导航，因为您同时也在浏览导航的背景颜色。

此外，在最后一行应该是字体粗细而不是文本粗细。

   * {
	font-family: Verdana;
	font-size: 14px;
	margin: 0;
}

p {
	padding 20px;
}

#wrapper {
	width: 900px;
	background-color: #ff3333;
	margin: auto;
}

header {
	background-color: #00c9fd;
	width: 900px;
}



nav,
a {
	font-family: Impact;
	font-size: 15px;
	color: black;
	text-decoration: none;
	display: inline-block;
	width: 200px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	margin: 0px;
	padding: 0px;
	float: left;
}

a:hover {
	background-color: white;
	display: inline-block;
}

nav {
	background-color: #cccccc;
	width: 900px;
}


#bigimage {
	width: 900px;
}

#bigimage,
p {
	color: #00c9fd;
	background-color: #ffffff;
	font-size: 12px;
}

main {
	width: 900px;
}

article {
	background-color: #cccccc;
	width: 900px;
}

#contact {
	background-color: #cccccc;
	width: 900px;
}

footer {
	background-color: #00c9fd;
	width: 900px;
}

header,
h1 {
	padding: 20px 0px 5px 0px;
	color: rgb(255, 255, 255);
	font-size: 30px;
	font-family: Impact;
	text-weight: normal;
}

	<div id="wrapper">
		<header>
			<h1>SUPERCOMPUTERS</h1>
		</header>
		<nav>
			<a href="http://www.pbruinaars.ictlaurens.nl/opdrachtje/new.html">Home</a>
			<a href="http://www.pbruinaars.ictlaurens.nl/opdrachtje/new.html">Meer informatie</a>
			<a href="http://www.pbruinaars.ictlaurens.nl/opdrachtje/new.html">Tijdlijn</a>
		</nav>
		<div id="bigimage">
			<img src="images/titanadfacomputer.jpg" alt="Titan 2 Supercomputer" width="900">
			<p>
				<b>Lorem</b> <br> ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis turpis sit amet blandit malesuada. Praesent at lacus rutrum, auctor justo sed, consectetur massa. Cras gravida vehicula vulputate. Ut magna odio, mollis non dolor
				at, dignissim faucibus eros.
			</p>
		</div>
		<main>
			<article>hoi1</article>
			<article>hoi2</article>
			<article>hoi3</article>
		</main>
		<div id="contact">hoi4</div>
		<footer>hoi5</footer>
	</div>

Answer 3

您的选择器错误。您编写了nav, a，这意味着将这些样式同时应用于nav和a元素。实际上，您需要nav a，这意味着仅将这些样式应用于a元素的子元素nav上。

nav a {
  font-family: Impact;
  font-size: 15px;
  color: black;
  text-decoration: none;
  display: inline-block;
  width: 200px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  margin: 0px;
  padding: 0px;
  float: left;
}

Answer 4

尝试一下：

nav
a {
    font-family: Impact;
    font-size: 15px;
    color: black;
    text-decoration: none;
    display: inline-block;
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin: 0px;
    padding: 0px;
}

nav
a:hover {
    background-color: white;
    display: inline-block;
}

我删除了逗号，因为用逗号将其转换为nav＆a。在您的情况下，删除它不仅可以解决问题，而且会覆盖导航的宽度，这就是为什么它似乎没有占据整个宽度的原因。

导航栏未正确排列

4 个答案: