HTML/CSS: Stil Form Etiketten auf der gleichen Linie und inline mit Formularfeldern angezeigt werden

Question

Ich habe hier sah, aber keine der Antworten haben für mich gearbeitet.

I 2 Formularfelder in einer Zeile haben, möchte ich die Form Etiketten gestalten, auch auf einer Linie zu sein, und auch inline mit dem richtigen Formularfeld sein. Die zwei Methoden, die ich verwendet habe, haben entweder die Formularfelder inline und auch die Labels gemacht, aber eines der Labels ist nicht inline, egal ob ich Ränder oder Padding verwende, es würde sich einfach nicht über einen bestimmten px bewegen /%. (Methode 1)

Die andere macht die Etiketten inline, aber wieder einmal konnte eine der Etiketten nicht über eine bestimmte px /% und die Formularfelder alignmnet verschoben werden. (Methode 2)

Methode 1

label{ 
 
    text-transform: uppercase; 
 
    font-size: 0.8em; 
 
    font-weight: bold; 
 
    margin-left: 11px 
 
} 
 

 
label.right_lab{ 
 
    display:inline-block; 
 
} 
 

 
label#lname{ 
 
    float: right;  
 
    margin-left: 60% !important; 
 
}

<label for="fname" class="right_lab">First name</label> 
 
<label for="lname" class="right_lab">Last name</label><br> 
 
<input type="text" id='fname' name="fname" value="" placeholder="e.g Joe"> 
 
<input type="text" id='lname' name="lname" value="" placeholder="e.g.Bloggs"><br>

Methode 2

label{ 
 
    text-transform: uppercase; 
 
    font-size: 0.8em; 
 
    font-weight: bold; 
 
    margin-left: 11px 
 
} 
 

 
label.right_lab{ 
 
    display:inline-block; 
 
} 
 

 
label#lname{ 
 
    float: right;  
 
    margin-left: 60% !important; 
 
}

<label for="fname" class="right_lab">First name</label> 
 
<input type="text" id='fname' name="fname" value="" placeholder="e.g Joe"> 
 
<label for="lname" class="right_lab">Last name</label><br> 
 
<input type="text" id='lname' name="lname" value="" placeholder="e.g.Bloggs"><br>

Answer 1

Methode drei:

label { 
 
    display: inline-block; 
 
} 
 
label>input { 
 
    display: block; 
 
}

<label> 
 
    First name 
 
    <input type="text" /> 
 
</label> 
 
<label> 
 
    Last name 
 
    <input type="text" /> 
 
</label>