erstellen Farbfeld auf dem Hintergrund des Textes in html

Question

Ich erstelle die folgende Webseite mit HTML. Im Abschnitt "Ihre Anzeigen" befinden sich rote und violette Rechtecke, die unter dem weißen Text platziert sind.

habe ich folgendes in meinem Stil Abschnitt

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 
    } 

Und in der eigentlichen Text und Radio-Button, verwende ich:

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

Meine Lösung hat zwei Dinge, die sind anders als das Bild:

1.Ich möchte die te xts zum Ausrichten in der Mitte. Aber kurz und schlecht in meiner Lösung sind linksbündig. Tall und Rich sind rechtsbündig.

2. Ich möchte die beiden Rechteck mit der gleichen Größe und auch einige Marge auf der linken und rechten Seite des Textes. Aber meine Hintergrundrechteckgröße ist nur groß genug, um den Text zu umhüllen, d. H. Das rote Rechteck ist kürzer als das für schlechte.

Wie löst man diese beiden Unterschiede? Der gesamte Code sollte in HTML sein.

Answer 1

können Sie bitte Padding links und oben in der linken Klasse hinzufügen. padding-top bottom n right-to-range-Klasse. Sie haben zwar Text-Align-Center. Es sollte Polsterung gegeben werden.

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; 

}