同一行中的两个文本一个左对齐另一个居中

Question

我有一个愚蠢的问题。 我希望两个文本保持在同一行，但一个 text-align: left; 和另一个 text-align: center;

这样做的正确方法是什么？

.number{
  text-transform:uppercase;
  letter-spacing:1px;
  text-align:left;
  display:inline;
  width: 50px;
  margin-top:-10px; 
  float:left;
  font-size:18px;
}

.menutitle{
  display:block;
  text-transform:uppercase;
  letter-spacing:1px;
  text-align:center;
  font-size:18px;
  margin-bottom:31px;
}

<span class="number">00</span><span class="menutitle">TEXT</span>

Answer 1

您可以通过Flexbox 做到这一点

.element {
  display: flex;
}

.menutitle {
  flex: 1;
  text-align: center;
  background: lightgreen;
}

<div class="element">
  <span class="number">00</span>
  <span class="menutitle">TEXT</span>
</div>