Ausrichten von Etiketten in der Mitte

Ich möchte 4 Textbeschriftungen in der Mitte mit einem Rand von 5px ausrichten.Ausrichten von Etiketten in der Mitte

Der Code:

.header_section span { 
 
    width: 100%; 
 
} 
 
.header_section min { 
 
    padding-left: 30%; 
 
    padding-right: 5%; 
 
} 
 
.header_section consume { 
 
    padding-right: 5%; 
 
}

<div class="header_section"> 
 
    <span class="min">Min</span> 
 
    <span class="consume">Consumption</span> 
 
    <span class="avg">Average</span> 
 
    <span class="max">Max</span> \t \t 
 
</div>

Benötige ich eine ID statt einer Klasse hinzufügen?
Muss ich das label Tag anstelle des Tags span verwenden?

Quelle

2016-06-03 Marta

Es könnte einfacher sein, ein Bild zu zeichnen, was Sie erreichen möchten. – Paran0a

Eine Klasse wird verwendet, um einen generischen CSS-Eigenschaftensatz zu definieren, der von vielen Elementen verwendet werden soll. Sie haben also im Grunde vier Elemente, die denselben Eigenschaftensatz verwenden. Sie erstellen eine Klasse, die Sie ihnen zuweisen. und du definierst es einmal. Könnten Sie bitte das erwartete Verhalten posten, damit die Menschen präziser in ihrer Hilfe sein können? – Gar

Müssen Sie sie horizontal oder vertikal ausrichten? "Labels" sind nur für Formularelemente erforderlich. Sie müssen nicht unbedingt ein 'id'-Attribut festlegen, es sei denn, Sie müssen es als Auslöser für JavaScript-Event-Handler oder etwas Ähnliches verwenden - oder Sie benötigen nur eine höhere Spezifität für die Deklaration von CSS-Regeln im Allgemeinen. – UncaughtTypeError

<style> 
.header_section{ 
text-align:center; 
} 
.header_section span { 
    width: 100%; 
    } 
.header_section min { 
padding-left: 30%; 
padding-right: 5%; 
} 
.header_section consume { 
padding-right: 5%; 
} 
</style>

Quelle

2016-06-03 08:04:30

Unter Stil kann dies tun. Es fügt allen Span außer dem ersten einen linken Rand von 5px hinzu.

.header_section{ 
    text-align:center; 
} 
.header_section span + span { 
    margin-left:5px; 
}

Ein bisschen verbesserte Version ist hier in diesem fiddle

Quelle

2016-06-03 08:28:09

Benötige ich eine ID statt einer Klasse hinzufügen?

Kein

Muss ich das Label-Tag anstelle des span-Tag benutzen?

Nr. Etiketten sind für Texte, die mit einer Eingabe in einem Formular verknüpft sind. Vielleicht ist eine Liste, abhängig von der semantischen Bedeutung.

.header_section{ 
 
    text-align:center; 
 
} 
 

 
.header_section li{ 
 
    display:inline-block; 
 
    margin-right:5px; 
 
}

<ul class="header_section"> 
 
    <li>Min</li> 
 
    <li>Consumption</li> 
 
    <li>Average</li> 
 
    <li>Max</li> \t \t 
 
</ul>

Quelle

2016-06-03 08:31:38 blonfu

Ausrichten von Etiketten in der Mitte

Antwort

Verwandte Themen