margin属性不能与css中的select元素一起使用

Question

我有这段代码：

<div class= "foo">
<select >blablabl</select>;</br>
<select >blablabl</select>;
</div>

在css中

.foo select{
    margin-bottom:50px;
}

输出是彼此相邻的2个选择元素，不与50px分开。我在这里缺少什么？

Answer 1

默认情况下（通常）

select元素为display: inline，不会考虑边距。如果您希望每个人都在自己的行上，请将其更改为display: block;如果您希望每个人都有一个较大的底部边距，请将其更改为display: inline-block。

编辑：我看到你有<br>，所以他们也会分成两行display: inline-block。

Answer 2

<div class= "foo">
  <select >blablabl</select>
  <select >blablabl</select>
</div>

在css中

.foo select {
    display: block;
    margin-bottom: 50px;
}

Answer 3

试试这段代码：

<强> HTML：

<div class= "foo">
    <select ><option>blablabl</option></select>;</br>
    <select ><option>blablabl</option></select>;
</div>

<强>的CSS：

.foo select{
    margin-bottom:50px;
}