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

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>

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

Two texts in the same line one aligned left the other centered

html

css

css-float

text-alignment