Wie mehrere dl/dt/dd-Tags auf der gleichen Linie

Question

ich brauche, um mehrere Informationen auf der gleichen Linie zu erhalten diese bekommen:

Namen: Robert Alter: 10 Geschlecht: männlich

Wo die Etiketten verschiedene Farben von dem Wert sind. Wie würde ich das tun?

Answer 1

Die dt und dd Tags haben display: block über den Browser eingestellt. Setzen Sie das einfach auf display: inline oder inline-block zurück, um sie in derselben Zeile zu setzen.

dt, dd { 
 
    display: inline-block; 
 
    margin: 0; 
 
} 
 
dt { 
 
    font-weight: bold; 
 
} 
 
dt:after { 
 
    content: ":"; 
 
}

<dl> 
 
    <dt>Name</dt> 
 
    <dd>Robert</dd> 
 
    <dt>Age</dt> 
 
    <dd>10</dd> 
 
    <dt>Gender</dt> 
 
    <dd>Male</dd> 
 
</dl>