主页 / 问题 / 698332
Accepted
Антон
Asked:2020-07-27 15:10:51 +0000 UTC2020-07-27 15:10:51 +0000 UTC

如何在 HTML 中的一行中均匀地放置文本？

  • 772

我需要在同一行上均匀分布以下数据：

'27.07.2017', 'USD: 59,91', 'Euro: 69,68', 'Brent: 50,91', 'Вы вошли как Guido'.

汇率和石油应该处于中间位置。为此，我只使用了一个<pre>没有任何样式、有几十个空格的标签。

html

3 个回答

  1. Best Answer

    可以float在样式中用于将所需的块“分散”在左侧和右侧，将其他所有内容留在中间：

    <p style="text-align: center">
  <span style="float: left">27.07.2017</span>
  <span>USD: 59,91</span>
  <span>Euro: 69,68</span>
  <span>Brent: 50,91</span>
  <span style="float: right">Вы вошли как Guido</span>
</p>

    • 3

  2. 弹性框选项

    .flex {
display:flex;
text-align:center;
}
.flex * {
flex: 1 0 auto;
}
.flex *:first-child {
text-align:left;
}
.flex *:last-child {
text-align:right;
}
    <div class="flex">
<div>27.07.2017</div>
<div>USD: 59,91, Euro: 69,68, Brent: 50,91</div>
<div>Вы вошли как Guido</div>
</div>

    • 1

  3. 你可以使用弹性盒子。并让孩子要求margin auto将积木移动到最大距离。尽管我建议不要依赖标记中的块号，而是添加适当的类。示范：

    .flex {
  display: flex;
}

/* второй блок и последний сместить максильно вправа */
.flex > :nth-child(2),
.flex > :last-child {
  margin-left: auto;
}

/* остальные блоки отодвинуть на 10px вправа */
.flex > :not(:nth-child(2)),
.flex > :not(:last-child) {
  margin-left: 10px;
}
    <div class="flex">
  <div class="flex__item">27.07.2017</div>
  <div class="flex__item">USD: 59,91</div>
  <div class="flex__item">Euro: 69,68</div>
  <div class="flex__item">Brent: 50,91</div>
  <div class="flex__item">Вы вошли как Guido</div>
</div>

    • 0

相关问题