两个跨度元素的文本对齐

Question

我希望span元素#spl和#xspl同等且正确对齐。请帮助以使其看起来大小相等。 它们都应该是平等的并且正确对齐。 它应该是这样的：

＆＃13;

＆＃13;

#spl {
  background: brown;
  margin: : 5px;
  padding: 5px 0;
}
#xspl {
  background-color: purple;
  margin: : 5px;
  padding: 5px 0;
}

＆＃13;

<fieldset>
  <legend>Your Indicators</legend>

  <label for="height">Height :</label>

  <span id="spl"> Short </span>

  <input type="range" id="height" min="0" max="100" name="Height">

  <span id="xspl"> Tall </span>

  <br>

  <label for="salary">Salary :</label>

  <span id="spl">Poor </span>

  <input type="range" id="salary" min="0" max="100" name="salary">

  <span id="xspl"> Rich</span>


</fieldset>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以通过向其提供固定width来对齐它们。

#spl {
  background: brown;
  margin: : 5px;
  padding: 5px 0;
}
#xspl {
  background-color: purple;
  margin: 5px;
  padding: 5px 0;
}
label {
  width: 100px;
  display: inline-block;
}
#spl,
#xspl,
input {
  display: inline-block;
  vertical-align: middle;
}
#spl,
#xspl {
  width: 40px;
}

<fieldset>
  <legend>Your Indicators</legend>

  <label for="height">Height :</label>

  <span id="spl"> Short </span>

  <input type="range" id="height" min="0" max="100" name="Height">

  <span id="xspl"> Tall </span>

  <br>

  <label for="salary">Salary :</label>

  <span id="spl">Poor </span>

  <input type="range" id="salary" min="0" max="100" name="salary">

  <span id="xspl"> Rich</span>


</fieldset>