html - 下拉组合框不对齐

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

它们没有正确对齐，因为标签“Country:”比其他两个短。要解决此问题，您应该使用 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%;
}