Question

初学者在这里。

我试图弄清楚如何在导航栏上放置5个元素。第一个元素是标题，另一个是李的。

希望有人可以提供帮助！

我想得到以下结果： each element fills up 20% of the width 但是我得到的是这个。 Not equally distributed space

代码段下方。

body {
  width: 960px;
  margin: auto;
  background-color: slateblue;
}

#navigation {
  background-color: white;
  width: 960px;
}

#navigation h2 {
  display: inline;
  width: 20%;
  background-color: #555;
  margin: 0;
  font-size: 18px;
  color: #ffa0a0;
  margin: 0;
}

#navigation ul {
  list-style-type: none;
  display: inline;
  font-size: 0px;
  margin: 0;
}

#navigation ul a {
  display: inline-block;
  width: 20%;
  background-color: #555;
  font-size: 18px;
  color: #ffa0a0;
  text-align: center;
  margin: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Pagename</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <div id="navigation">
    <h2>Pagename</h2>
    <ul>
      <a href="#">
        <li>Home</li>
      </a>
      <a href="#">
        <li>Services</li>
      </a>
      <a href="#">
        <li>Portfolio</li>
      </a>
      <a href="#">
        <li>Contacts</li>
      </a>
    </ul>
  </div>
</body>

</html>

Answer 1

您可以使用flexbox功能轻松实现此目的。我对您的代码进行了略微的修改，

用ul元素替换div（因为您不使用li项）
将主体宽度替换为100％，使其可以与摘要显示一起使用（此图标仅用于答案中的美观显示，您可以将其替换为像素值。也div {{1 }}样式默认情况下设置为100％（这是一个块显示的项目），您无需为width元素设置样式。

更新。我将Pagename标题添加到平均分配的项目中，以适合您想要的设计（根据屏幕截图）。

div#navigation

body {
  width: 100%;
  margin: auto;
  background-color: slateblue;
}

#navigation {
  background-color: white;
}



#navigation #nav-items {
  list-style-type: none;
  justify-content:space-between;
  display: flex;
  font-size: 0px;
  margin: 0;
}

#navigation h2 {
  background-color: #555;
  margin: 0;
  font-size: 18px;
  color: #ffa0a0;
  margin: 0;
}

#navigation #nav-items a {
  background-color: #555;
  font-size: 18px;
  color: #ffa0a0;
  text-align: center;
  margin: 0;
}

标题和导航之间的差距

1 个答案: