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

I need to align three spans in CSS, one on the right, one in the middle and the other on the left. How do I do it? [duplicate]

提问人：giuseppeBianchino 提问时间：10/20/2023 最后编辑：Bumhan YugiuseppeBianchino 更新时间：10/20/2023 访问量：38

问：

这个问题在这里已经有答案了：
向左、居中和向右对齐 3 个不相等的块 （4 个答案）
上个月关闭。

我正在为电子商务创建一个具有背景颜色的单行栏：黑色;。这个 div 有三个句子，我在 HTML 中将它们组织为跨度。我必须确保这些句子被组织起来，一个在右边，一个在左边，另一个在中间。

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>

html css css-float text-align text-justify

评论

答：

1赞 j08691 10/20/2023 #1

忘记浮点数，将 flexbox 与：p {display:flex;justify-content: space-between;}

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

评论

0赞 giuseppeBianchino 10/20/2023
太好了，有点管用。有点，因为它并不完美地位于页面中间，但它是根据行中存在的字符数量排列的。有没有办法把它准确地放在中间？？
0赞 j08691 10/20/2023
您可以为跨度指定最小宽度
0赞 Ransike Randeni 10/20/2023 #2

在 CSS 中，您通过 ID 调用了 span 类，尝试添加这些代码行，看看，

#servizioClienti {
  text-align: left;
  float: left;
}

#spedizioniGratis {
  text-align: center;
}

#trovaci {
  text-align: right;
}

如果这不起作用，请尝试将所有跨度包装在 div 容器周围并再次检查

评论

0赞 giuseppeBianchino 10/20/2023
:(不起作用
0赞 Ransike Randeni 10/20/2023 #3

试试这个，

HTML：我添加了一个容器类

<div class="container 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>

CSS：

.barraServizioClienti {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#servizioClienti {
    display: flex;
    justify-content: left;
  }
  
  #spedizioniGratis {
    display: flex;
    justify-content: center;
  }
  
  #trovaci {
    display: flex;
    justify-content: right;
  }

评论

0赞 giuseppeBianchino 10/20/2023
还没有，另外，我应该多研究这个容器的东西，谢谢

上一个：在 CSS Flexbox 中，为什么没有 “justify-items” 和 “justify-self” 属性？

下一个：浮点 Div 在 CSS 中未按预期工作 [重复]