下拉式組合框不對齊

請參閱：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>

來源

2016-05-13 Illo Yonex Illo

他們沒有正確對齊因爲標籤「國家」是比其他兩個更短。要解決此問題，您應該使用position屬性而不是margin-left。這將確保您相對於頁面而不是標籤對齊組件。

這裏有一個簡單的例子與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%; 
}

來源

2016-05-13 07:09:13 Aurasphere

在這種情況下，你不能使用保證金左

：6rem;按照你的想法對齊它們。你可以使用2種方法來做：

1 - 使用表格2列（非常容易）： +放置標籤「名字：」，「姓氏：」，..在第一列 +把輸入和選擇以秒列

2 - 使用DIV包含標籤和另一個包含輸入或選擇，現在你可以使用CSS像你想

3對準格 - 您可以使用引導程序的形式和舉例來說，如果你不不擅長css =）

來源

2016-05-13 07:15:05

下拉式組合框不對齊

回答

相關問題