兩個跨度元素的文本對齊

Question

我希望跨度元素#spl和#xspl被平等且正確地對齊。請幫助以使其看起來大小相等。 他們兩人應該是平等和正確對齊。 它應該是這樣的：

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

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

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>