Question

我创建了一个<div>，ID为＆＃34;页脚＆＃34;并在其中放入三个<h3>元素。

如何修改文字？我已成功申请top和font-size，但我希望将这些词放在一边。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

您正在寻找的是将 margin property 应用于您的<h3>代码。通过指定两个值（例如margin: 0 20px），您可以声明您只希望边距水平而非垂直应用：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

如果你只想让marign在文本之间（以便不考虑外边缘），你可以使用伪选择器 {{3 }} 仅定位不是第一个的元素，然后只需将 :not(:first-of-type) 应用于这些元素：

这可以在以下内容中看到：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

注意：我已将color更改为black，以便可以看到该文字。

Answer 2

您可能希望为<h3>元素

添加一些填充或边距

希望这就是你要找的东西。如果需要，很乐意解释或帮助提供更好的解决方案。

#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;
    padding: 0 25px;
}

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

如何修改div中的文本？

2 个答案: