(选择）显示后仍占用空间的元素:无

(select) elements still taking space after display:none

本文关键字：元素 占用空间 选择 显示      更新时间：2023-09-26

所以问题是，对于任何其他元素，display:none都会使元素不可见并且不占用空间，但是只有对于元素，当display:nnone时它仍然占用空间。

<style>
#test { display:none; }
</style>
<body>
<select id='test'>
<option value='option1'>option1</option>
<option value='option2'>option2</option>
</select>
</body>

它只是让select元素不可见，但仍然占用空间，我尝试显示：选项元素也没有，并在谷歌和stackoverflow上进行了研究，但似乎没有人遇到同样的问题。有人能透露一下这件事吗？提前谢谢。

工作非常好。下面是一个并排的例子：

使用display: none:隐藏<select>

#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>

您提到的问题只有当您将<select>的visibility设置为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的元素。

相关文章：