在html文本的背景上創建顏色框

Question

我使用html創建以下網頁。在「您的指示器」部分中，紅色和紫色矩形位於白色文本下方。

我用我的風格部分

span.leftrange{ 
    background:red; 
    font-weight:bold; 
    color:white; 
    text-align:center; 
    width:auto; 
    } 
    span.rightrange{ 
    background:purple; 
    font-weight:bold; 
    color:white; 
    text-align:center 
    } 

以下而在實際的文本和單選按鈕，我用：

<fieldset> 
    <legend>Your Indicators</legend> 
    <label for="height">Height:</label> 
    <span class="leftrange">Short</span> 
    <input type="range" min="0" max="100" step="5" value="50" id="height" name="height"> 
    <span class="rightrange">Tall</span> 
    <br> 

    <label for="height">Salary:</label> 
    <span class="leftrange">Poor</span> 
    <input type="range" min="0" max="100" step="5" value="50" id="salary" name="salary"> 
    <span class="rightrange">Rich</span> 
    <br> 
    </fieldset> 

我的解決辦法有兩個東西，是不同於圖片：

1.我想要te xts在中心對齊。但是我的解決方案中的Short和Poor是左對齊的。高和豐富是正確的對齊。

2.我想要兩個相同大小的矩形，並且在文本的左側和右側還有一些邊距。但是，我的背景矩形大小隻能夠包圍文本，也就是說，紅色矩形的大小比窮人大。

如何解決這兩個差異？所有的代碼都應該在html中。

Answer 1

請問你可以在leftrange類中添加填充左邊和頂部的填充。 padding-top底部n右到右排列。雖然你有文字對齊中心。它應該填充填充。

span.leftrange{ 
background:red; 
font-weight:bold; 
color:white; 
text-align:center; 
width:auto; 
padding-top:10px; 
padding-right:10px; 
padding-left:10px; 
padding-bottom:10px; 
width:100px; 
width:100px; 
float:centre; 

} 
span.rightrange{ 
background:purple; 
font-weight:bold; 
color:white; 
text-align:center; 
padding-top:10px; 
padding-right:10px; 
padding-left:10px; 
padding-bottom:10px; 
width:100px; 
width:100px; 
float:centre; 

}