Question

我正在建立我自己的投资组合/公司网站，我的代码在下面我尝试使其全宽，但它没有全宽。我在html5和css3

中编写代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TECH-EXPERTS</title>
  <link rel="stylesheet" href="css/style.css">
</head>

  <body>

  <header>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Our Work</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  </header>

</body>
</html>

nav{
  background-color: black;
  border-radius: 5px;
  display: block;
  overflow: hidden;
  width: 90%;
}

nav ul {
  margin: 0;
  padding: 0;
  float: right;
}

nav ul li {
  display: inline-block;
  list-style-type: none;
}

nav ul li a {
  color: red;
  display: block;
  line-height: 56px;
  padding: 0 24px;
  text-decoration: none;
}

nav a:hover{
  color: blue;
}

Answer 1

首先，假设您希望导航栏跨越窗口的整个宽度，您需要确保删除body元素上的默认边距（如果您是没有使用已经处理过的某种css重置。）

尝试：

body {
    margin: 0;
}

现在删除导航栏上的width: 90%;。这应该让你指出正确的方向。

Here's a Codepen正在行动中。

导航栏不是全宽

1 个答案: