HTML/CSS：同じ行に表示され、フォームフィールドとインラインで表示されるスタイルフォームのラベル

Question

ここでは見てきましたが、答えはどれも私のために働いていません。

私は1行に2つのフォームフィールドを持っています。フォームラベルを1行にするようにスタイルを設定し、正しいフォームフィールドでインラインにしたいと思います。

私が使用した2つの方法は、フォームフィールドインラインとラベルを作成しましたが、ラベルの1つはインラインではありません。余白やパディングを使用しても、特定のpx /％。

もう1つはラベルをインラインにしますが、もう一度ラベルの1つが特定のpx /％を超えて移動できず、フォームフィールドalignmnetを使いこなしました。 （方法2）

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

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

方法3：

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

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