html - 如何修改div中的文字？

Question

我创建了一个 <div> ID 为“footer”并放置三个 <h3>里面的元素。

如何修改文本？我已经成功申请了 top和 font-size但我想把单词隔开。

#footer {
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Height of the footer */
  height: 86px;
  /* color: white;
     Changed for this demo */
  color: black;
}

#footer>h3 {
  top: 20px;
  position: relative;
  font-size: 30px;
  display: inline;
}

<div id="footer">
  <h3>Word 1</h3>
  <h3>Word 2</h3>
  <h3>Word 3</h3>
</div>

Answer 1

您正在寻找的是应用 margin property 到您的 <h3>标签。通过指定两个值，例如 margin: 0 20px ，您可以声明您只希望水平应用边距而不是垂直应用边距:

#footer {
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 86px;
  /* Height of the footer */
  color: black;
}

#footer > h3 {
  top: 20px;
  position: relative;
  font-size: 30px;
  display: inline;
  margin: 0 20px;
}

<div id="footer">
  <h3>Word 1</h3>
  <h3>Word 2</h3>
  <h3>Word 3</h3>
</div>

如果您只希望边缘位于文本的之间(以便不考虑外边缘)，您可以使用伪选择器 :not(:first-of-type) 只定位不是第一个的元素，然后简单地应用 margin-left 到这些:

这可以从以下方面看出:

#footer {
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 86px;
  /* Height of the footer */
  color: black;
}

#footer > h3 {
  top: 20px;
  position: relative;
  font-size: 30px;
  display: inline;
}

#footer > h3:not(:first-of-type) {
  margin-left: 20px;
}

<div id="footer">
  <h3>Word 1</h3>
  <h3>Word 2</h3>
  <h3>Word 3</h3>
</div>

注意:我已经更改了 color至 black以便可以看到文本。