space between 2 words CSS

问题

I would like to do a space between 2 words in css for example:

 1 RUNNING DAYS    ADMIN@SUPER.BIZ

In HTML there is  &nbsp but it's not correct to use &nbsp I think?

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

How to do that in 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;

}

Thank you

回答1:

I would do something like this, if I'm understanding you correctly

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

回答2:

You can wrap your text in a p tag, and you can add a margin to that after making it inline-block.

Alternatively, you can make the container a flexbox, and use justify-content: space-between; but you'll need to group each icon with its respective text inside another div or span.

For example:

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

回答3:

Since you already have a .fa icon in the right part of your div just add it some left margin:

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

Also, change your far for fa class to correctly display font-awesome icons

来源：https://stackoverflow.com/questions/52395127/space-between-2-words-css

标签

css