Question

我在Mac / Chrome上。 2个文本字段正确对齐但不是下拉框。有人知道是什么原因造成的吗？

<script src="/js/jquery-2.1.4.min.js"> </script>
<script src="/js/bootstrap.min.js"></script>

* {
  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;
}

Answer 1

他们没有正确对齐，因为标签＆＃34;国家/地区：＆＃34;比其他两个短。要解决此问题，您应使用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%;
}

Answer 2

在这种情况下你不能使用margin-left：6rem;按照你想要的方式对齐它们。您可以使用2种方式：

1 - 使用2列表格（非常简单）： +在第一栏中添加标签“名字：”，“姓氏：”，.. +输入输入并在秒栏中选择

2 - 使用div来包含标签，另一个包含输入或选择，现在你可以使用css来对齐你想要的div

3 - 如果你不擅长css =）

，你可以使用bootstrap形式和示例

下拉组合框不对齐

2 个答案: