下拉式组合框不对齐

请参阅：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

下拉式组合框不对齐

回答

相关问题