ドロップダウンコンボボックスが一致しません

Question

参照：http://codepen.io/Chiz/pen/RaORwd

私はMac/Chromeを使用しています。 2つのテキストフィールドは正しく整列されますが、ドロップダウンボックスは整列しません。誰でもこの原因を知っていますか？

* { 
 
    font-family: "Open Sans"; 
 
} 
 
form { 
 
    margin-top: 1%; 
 
} 
 
input { 
 
    width: 18rem; 
 
    height: 2rem; 
 
    border: 1px solid lighten(grey, 30%); 
 
    border-radius: 4px; 
 
} 
 
select { 
 
    width: 18rem; 
 
    height: 2.2rem; 
 
} 
 
input, 
 
select { 
 
    margin-left: 6rem; 
 
}

<form> 
 
    First Name: 
 
    <input type="text" name="firstname"> 
 
    <br> 
 
    <br>Last Name: 
 
    <input type="text" name="lastname"> 
 
    <br> 
 
    <br>Country: 
 
    <select> 
 
    <option value="Singapore">Singapore</option> 
 
    </select> 
 
</form>

Answer 1

彼らはラベルので、正しく揃えされていない「国：」他の二つよりも短くなっています。これを修正するには、margin-leftの代わりにposition属性を使用する必要があります。これにより、ラベルではなく、ページに相対的なコンポーネントの位置合わせが確実に行われます。

ここposition:absoluteとの簡単な例です：あなたは余裕左使用することはできません。この場合には

* 
{ 
font-family:"Open Sans"; 
} 

form 
{ 
margin-top:1%; 
} 

input 
{ 
width:18rem; 
height:2rem; 
border:1px solid lighten(grey,30%); 
border-radius:4px; 
position: absolute; 
left: 20%; 
} 

select 
{ 
width:18rem; 
height:2.2rem; 
position: absolute; 
left:20%; 
} 

Answer 2

：6remを。あなたが好きなようにそれらを整列させる。

2桁のテーブルを使用すると、最初の桁に + putラベルと「姓：」というラベルを付けて入力します。使用divのラベルを含むようにして、別の入力が含まれているか、選択して、今あなたが

3をしたいのようなdiv要素を揃えるためにCSSを使用することができます - -

2秒の列で選択しますが、ブートストラップフォームと例を使用することができるならば、あなたドン'tはCSSで= =）