0

我有两条线，我希望它们在彼此下方，所以我在它们之间放置了一个换行符。但在那之后，字里行间就出现了巨大的差距。

如何保持行（“h8 adr”和“h8 no”）分隔但在分隔之间不留空格？

我的代码：

.adr {
  border-style: solid;
  border-width: 20px;
  padding-top: 65px;
  padding-bottom: 65px;
  padding left: 65px;
  padding-right: 65px;
  font-size: 500%;
  font-weight: bold;
  text-align: center;
}

.no {
  font-stretch: condensed;
  font-size: 20px;
}
<h1 class='adr'>

  A place
  <br>
  <h8 class='ad'>
    4567 postal code An Address
  </h8>
  <br>
  <h8 class='no'>
    Phone: 123-456 789 Fax: 123-456 789
  </h8>
</h1>

4

3 回答 3

1

拿走第二个<br>，使.no有display: block：

.adr {
  border-style: solid;
  border-width: 20px;
  padding-top: 65px;
  padding-bottom: 65px;
  padding left: 65px;
  padding-right: 65px;
  font-size: 500%;
  font-weight: bold;
  text-align: center;
}

.no {
  font-stretch: condensed;
  font-size: 20px;
  display: block;
}
<h1 class='adr'>

  A place
  <br>
  <h8 class='ad'>
    4567 postal code An Address
  </h8>
  <h8 class='no'>
    Phone: 123-456 789 Fax: 123-456 789
  </h8>
</h1>

于 2017-11-01T23:52:31.813 回答
0

最简单的方法是通过应用简单地.no变成块级元素
display: block。然后您可以使用负边距调整偏移量：

.no {
  display: block;
  margin-top: -24px;
}

要使用的确切负边距取决于您希望第二个文本所在的确切位置，但会将-24px元素放置在前一个元素的确切底部：

.adr {
  border-style: solid;
  border-width: 20px;
  padding-top: 65px;
  padding-bottom: 65px;
  padding-left: 65px;
  padding-right: 65px;
  font-size: 500%;
  font-weight: bold;
  text-align: center;
}

.no {
  font-stretch: condensed;
  font-size: 20px;
  display: block;
  margin-top: -24px;
}
<h1 class='adr'> A place
  <br>
  <h8 class='ad'>
    4567 postal code An Address
  </h8>
  <br>
  <h8 class='no'>
    Phone: 123-456 789 Fax: 123-456 789
  </h8>
</h1>

另外，请注意：

  • 你.adr有padding left而不是padding-left. 这在上面的例子中是固定的。
  • 您在两个元素之间也有一个<br />可以删除的中间值，但请注意，如果这样做，您需要调整偏移量。
  • <h8>将是一个自定义元素；标准的HTML 标题只能达到h6.

希望这可以帮助！:)

于 2017-11-01T23:55:42.937 回答
0

您可以删除换行符并将该地址放入段落标记中。这样您就不必更改任何样式。如果那还不够接近，则更改显示以阻止并调整边距/填充将起到作用。希望这可以帮助

.adr {
  border-style: solid;
  border-width: 20px;
  padding-top: 65px;
  padding-bottom: 65px;
  padding left: 65px;
  padding-right: 65px;
  font-size: 500%;
  font-weight: bold;
  text-align: center;
}

.no {
  font-stretch: condensed;
  font-size: 20px;
}
<h1 class='adr'>
  A place
  <br>
  <h8 class='ad'>
    4567 postal code An Address
  </h8>
  
  <h8 class='no'>
    <p>Phone: 123-456 789 Fax: 123-456 789</p>
  </h8>
</h1>

于 2017-11-02T00:05:04.750 回答