Question

例如，我想在CSS中的2个单词之间留一个空格：

 1 RUNNING DAYS    ADMIN@SUPER.BIZ

在HTML中有 &nbsp，但是我认为使用&nbsp是不正确的吗？

<div class="bandeau-blanc">
        <div class="sous-titre-bandeau-blanc"><i class="far fa-calendar"></i> 1 RUNNING DAYS &nbsp;&nbsp; <i class="far fa-envelope"></i>ADMIN@SUPERBTC.BIZ</div>
    </div>

如何在CSS中做到这一点？

.sous-titre-bandeau-blanc{
    font-family: 'Open Sans', sans-serif;
    font-size: 13.3333px;
    color: #474747; 
    padding-top: 14px;
    padding-left: 28px;
    padding-bottom: 15px;

}

谢谢

Answer 1

您可以将文本包装在p标记中，也可以在将其内嵌块后添加一个空白。

或者，您可以使容器成为flexbox，并使用justify-content: space-between;，但需要将每个图标及其各自的文本分组在另一个div或span中。

例如：

<div class="bandeau-blanc">
  <div class="sous-titre-bandeau-blanc">
    <span>
      <i class="far fa-calendar" />
      <p>1 RUNNING DAYS</p>
    </span>
    <span>
      <i class="far fa-envelope" />           
      <p>ADMIN@SUPERBTC.BIZ</p>
    </span>
  </div>
</div>
<style>
.sous-titre-bandeau-blanc {
  display: flex;
  justify-content: space-between;
  width: 450px;
}
</style>

Answer 2

如果我能正确理解你的话，我会做类似的事情

<style>
    .space-between {
        display: inline-block;
        padding-left: 3em;
    }
    .space-between:first-child {
        padding-left: 0;
    }
</style>

<div class="bandeau-blanc">
    <div class="sous-titre-bandeau-blanc">
        <div class="space-between"><i class="far fa-calendar"></i> 1 RUNNING DAYS</div>
        <div class="space-between"><i class="far fa-envelope"></i>ADMIN@SUPERBTC.BIZ<div>
    </div>
</div>

Answer 3

由于您的div右侧已经有一个.fa图标，因此只需在其左边添加空白：

.sous-titre-bandeau-blanc .fa.fa-envelope { margin-left: 30px; }

此外，将far类的fa更改为正确显示字体真棒的图标

2个字之间的空格CSS

3 个答案: