Question

所以问题在于，对于任何其他元素，display：none使元素不可见并且不占用空间，但是仅对于元素，它在display：none时仍占用空间。

<style>
#test { display:none; }
</style>

<body>
<select id='test'>
<option value='option1'>option1</option>
<option value='option2'>option2</option>
</select>
</body>

它只是使select元素不可见，但仍然占用空间，我尝试将display：none给予选项元素，并且已经研究了google和stackoverflow，但似乎没有人遇到同样的问题。有人可以对此有所了解吗？谢谢你提前。

Answer 1

完美无缺。这是一个并排的例子：

使用<select>隐藏display: none：

#test { display:none; }

<select id='test'>
<option value='option1'>option1</option>
<option value='option2'>option2</option>
</select>
<p>Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. </p>

<select>可见：

<select id='test'>
  <option value='option1'>option1</option>
  <option value='option2'>option2</option>
</select>
<p>Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem
  Ipsum Dolor Ismet.</p>

您提到的问题只有在visibility <select>设置为hidden时才会出现，如下所示：

#test { visibility: hidden; }

<select id='test'>
<option value='option1'>option1</option>
<option value='option2'>option2</option>
</select>
<p>Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. Lorem Ipsum Dolor Ismet. </p>

可能有一些使用visibility: hidden隐藏的其他元素或某种margin的元素。

（选择）元素在显示后仍然占用空间：无

1 个答案: