如何修改div中的文本?

时间:2018-02-21 19:42:25

标签: html css

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

如何修改文字?我已成功申请topfont-size,但我希望将这些词放在一边。

&#13;
&#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;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

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

&#13;
&#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;
&#13;
&#13;

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

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

&#13;
&#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;
&#13;
&#13;

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

答案 1 :(得分:0)

您可能希望为<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>