我需要在CSS中对齐三个跨度，一个在右侧，一个在中间，另一个在左侧。我该怎么做？

Question

我正在为电子商务创建一个背景颜色为黑色的单行栏。这个 div 包含三个句子，我在 HTML 中将它们组织为 Span。我必须确保这些句子的组织方式，一个在右边，一个在左边，另一个在中间。

span {
  display: inline-block;
}

.barraServizioClienti {
  width: 100%;
  height: 27px;
  padding: 4px 15px 4px;
  background-color: #121212;
}

.customerServiceItems {
  vertical-align: middle;
}

#spedizioniGratis {
  text-align: center;
}

#trovaci {
  float: right;
}

#servizioClienti a,
#spedizioniGratis,
#trovaci a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 100;
  color: #ffffff;
}

<div class="barraServizioClienti">
  <p>
    <span id="servizioClienti"><a href="home.html">Servizio Clienti</a></span>
    <span id="spedizioniGratis">Spedizioni e resi gratuiti</span>
    <span id="trovaci"><a href="home.html">Trova il negozio più vicino</a></span>
  </p>
</div>

Answer 1

忘记浮动，使用带有

p {display:flex;justify-content: space-between;}

的 Flexbox:

.barraServizioClienti {
  width: 100%;
  height: 27px;
  padding: 4px 15px 4px;
  background-color: #121212;
}

.customerServiceItems {
  vertical-align: middle;
}

#spedizioniGratis {
  text-align: center;
}

#servizioClienti a,
#spedizioniGratis,
#trovaci a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 100;
  color: #ffffff;
}

p {display:flex;justify-content: space-between;}

<div class="barraServizioClienti">
  <p>
    <span id="servizioClienti"><a href="home.html">Servizio Clienti</a></span>
    <span id="spedizioniGratis">Spedizioni e resi gratuiti</span>
    <span id="trovaci"><a href="home.html">Trova il negozio più vicino</a></span>
  </p>
</div>