Question

我似乎无法弄清楚为什么会这样：

我找不到错误，我尝试了很多解决方案，但他们没有解决问题。 Plz帮助

＆＃13;

body {
  margin: 0;
  padding: 0;
}
.logo {
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}
.active {
  background-color: #222;
}

＆＃13;

<a href="index.html" class="logo">
  <img src="img/logo.png" width=400em height=150em></img>
</a>
<div>
  <ul>
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</div>

＆＃13;

Answer 1

在图片上添加display: block; ...

body {
  margin: 0;
  padding: 0;
}
.logo {
  margin: 0;
  padding: 0;
}
.logo img {
  display: block;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}
.active {
  background-color: #222;
}

<!DOCTYPE HTML>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css.css" />
  <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400italic' rel='stylesheet' type='text/css'>
</head>

<body>
  <a href="index.html" class="logo">
    <img src="img/logo.png" width="400em" height="150em">
  </a>
  <div>
    <ul>
      <li><a class="active" href="index.html">Home</a>
      </li>
      <li><a href="about.html">About</a>
      </li>
    </ul>
  </div>
</body>

</html>

Answer 2

添加以下css

img {  
 display: block;
}

您的img标记也格式错误 - 它应如下所示：

<img src="img/logo.png" width="400em" height="150em" />

Html - 徽标和导航栏之间的空格

2 个答案: