标题和导航之间的差距答案

【问题标题】：Gap between heading and navigation标题和导航之间的差距
【发布时间】：2018-10-23 17:13:41
【问题描述】：

这里是初学者。

我想弄清楚如何在我的导航栏上放置 5 个元素。第一个元素是标题，另一个是 li's。

希望有人能帮忙！

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

在sn-p之下。

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>

【问题讨论】：

我的回答适合你的问题吗？

标签： nav heading

【解决方案1】：

您可以使用flexbox 功能轻松实现此目的。我将您的代码稍微编辑为

将ul 替换为div 元素（因为您不使用li 项目）
将主体宽度替换为 100% 以使其与 sn-p 显示器一起使用（这个只是为了在答案中显示好看，你可以用你的像素值替换它。还有divwidth style 默认设置为 100%（块显示项），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;
}

<!DOCTYPE html>
<html>

<head>
  <title>Pagename</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <div id="navigation">
    <div id="nav-items">
      <h2>Pagename</h2>
      <a href="#">
        <li>Home</li>
      </a>
      <a href="#">
        <li>Services</li>
      </a>
      <a href="#">
        <li>Portfolio</li>
      </a>
      <a href="#">
        <li>Contacts</li>
      </a>
    </div>
  </div>
</body>

</html>

【讨论】：