Question

我有两条线，我希望它们在正下方，所以我在它们之间放了一个换行符。但在那之后，两者之间存在巨大的差距。

如何保持线条（＆＃34; h8 adr＆＃34;＆＃34; h8 no＆＃34;）分开，但在分隔之间不留空间？

我的代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

取走第二个<br>并让.no拥有display: block：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

最简单的方法是通过应用 block-level element 简单地将.no变为 display: block 。然后，您可以使用 negative margins ：

调整偏移量

.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>将是custom element; standard HTML headings 仅限h6。

希望这有帮助！：）

Answer 3

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

.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>

你怎么在换线后取出线之间的空间？

3 个答案: