在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.我希望文本在中心对齐。但是，我的解决方案中的短缺与左对齐。高大和富有是正确对齐的。

2.我希望两个矩形具有相同的大小，并且在文本的左侧和右侧也有一些边距。但是我的背景矩形大小只够包裹文本，即简称红色矩形比穷人大。

如何解决这两个差异？所有代码都应该是html。

Answer 1

请你在左边的班级中添加左边和上边的填充。 padding-top bottom n right to rightrange class。虽然你有文字对齐中心。应该给它填充。

SELECT ba.accounts_account_number, bc.customers_customer_number 
FROM bank_accounts AS ba

INNER JOIN bank_accounts_customers AS bac
 ON bac.accounts_customers_account_id = ba.accounts_id

INNER JOIN bank_customers AS bc
 ON bc.customers_id = bac.accounts_customers_customer_id