3

これは私のコードです:

<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 セクションで、visibility:hidden のみを配置した場合、非表示にならず、そこにまだ列があるのはなぜですか?

4

1 に答える 1

7

visibility: hidden;これは、と sayの違いに関係しています。display: none;

visibility: hidden;要素を非表示にしますが、レイアウト内のスペースを占有します。

display: none;ドキュメントから要素を完全に削除します。そのための HTML はまだソース コードにありますが、スペースを占有しません。

position: absolute;要素は通常のフローから完全に削除されます。

于 2012-11-30T03:01:46.830 に答える