Question

这是我的代码：

<html>
<head>
<style type="text/css">
 ul {list-style:none; margin:0; padding:0;   }
  li{ float:left;  background-color:#444444; text-align: center; width: 100px;  
  border-right:1px solid white; color: white; }

li ul li { float: none;
         border-top:1px solid white;}

         li ul { visibility:hidden; position: absolute;}
        li:hover ul {visibility:visible;}
  </style>
</head>
<body>
     <ul>
       <li>home</li>
       <li id="up">pages
       <ul class="down">
       <li>a</li>
       <li>b</li>
       <li>c</li>                  
      </ul>
       </li> 
     </ul>    
</body>
</html>

在li ul部分，如果我只提供可见性：隐藏，它不会隐藏，那里仍然有一个列，为什么？

Answer 1

这与visibility: hidden;和display: none;

之间的区别有关

visibility: hidden;隐藏了元素，但它仍占用了布局中的空间。

display: none;从文档中完全删除元素。它不会占用任何空间，即使它的HTML仍然在源代码中。

position: absolute;该元素将从正常流程中完全删除。

为什么隐藏的可见性必须在css中添加绝对位置？

1 个答案: