如何设置标题元素之间的相等距离？答案

【问题标题】：How to set equal distance between header elements?如何设置标题元素之间的相等距离？
【发布时间】：2018-09-01 02:32:44
【问题描述】：

我正在使用 justify-content:space-between 在我的标题中水平分布所有元素。这工作正常，直到我将 padding-right:20px 添加到我的导航链接。它将我的标题 h2 元素向右移动，使其不均匀。如何保持填充但我的元素同样对齐？感谢您的帮助，谢谢。

https://jsfiddle.net/2fr3L8zh/14/

HTML

<header>
 <div id="header-wrapper">
  <nav>
   <a>Projects</a>
   <a>About</a>
   <a>Contact</a>
  </nav>

 <h2>EMMANUEL OJIJI</h2>
 <p>SOCIAL MEDIA HERE</p>
 </div>
</header>

<section id="intro">
<div id="intro-wrapper">
<h1>I'm Lorem Ipsum — a Birmingham -based Visual Designer with a passion and 
a firm belief in considered and meaningful design.</h1>
</div>
</section>

CSS

html {
margin: 0;
padding: 0;
height: 100%;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

header {
height: 100px;
background-color: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
padding-left: 50px;
padding-right: 50px;
}

#header-wrapper {
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
}

nav a {
padding-right: 20px;
}

#intro {
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}

#intro-wrapper {
display: flex;
text-align: center;
width: 50%;
}

#intro-wrapper h1 {
font-weight: 700;
font-family: 'Raleway', sans-serif;
font-size: 2.2em;
line-height: 60px;
color: #333;
}

【问题讨论】：

这里的意图是什么？您使链接更宽，因此其他所有内容都自然而然地转移了。
@Paulie_D “我如何保持填充但仍然让我的元素同样对齐？”，换句话说，有什么办法可以使链接填充不影响我的其余内容？
向 H2 添加 margin-left: -20px 是否会使其恢复原状？
section 和 header wrap 没有相同的宽度（我给了 90% 元素的边距），这可能是您问题的一部分。您可以为 header 元素赋予相等的宽度，并为每个元素重置文本对齐。 jsfiddle.net/2fr3L8zh/30 添加了一些背景图来显示中心和边框。这是你试图做的吗？
margin:auto 将 header-wrapper 元素居中（宽度为 90%，部分覆盖 100% 的宽度）。弹性：1；是用宽度喷洒你的 3 个 flex 孩子。（flex 会计算）

标签： html css flexbox padding

【解决方案1】：

避免导航的最后一个元素的填充：

nav a:not(:last-child)

html {
  margin: 0;
  padding: 0;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  height: 100px;
  background-color: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  ;
  align-items: center;
  padding-left: 50px;
  padding-right: 50px;
}

#header-wrapper {
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav a:not(:last-child) {
  padding-right: 20px;
}

#intro {
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#intro-wrapper {
  display: flex;
  text-align: center;
  width: 50%;
}

#intro-wrapper h1 {
  font-weight: 700;
  font-family: 'Raleway', sans-serif;
  font-size: 2.2em;
  line-height: 60px;
  color: #333;
}

<header>
  <div id="header-wrapper">
    <nav>
      <a>Projects</a>
      <a>About</a>
      <a>Contact</a>
    </nav>

    <h2>EMMANUEL OJIJI</h2>
    <p>SOCIAL MEDIA HERE</p>
  </div>
</header>

<section id="intro">
  <div id="intro-wrapper">
    <h1>I'm Lorem Ipsum — a Birmingham -based Visual Designer with a passion and a firm belief in considered and meaningful design.</h1>
  </div>
</section>

【讨论】：