html – “溢出”对此标记有什么作用?

前端之家收集整理的这篇文章主要介绍了html – “溢出”对此标记有什么作用?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用< ul>创建此标题菜单我想将它拉伸到页面的所有顶部.我首先使用宽度:100%但它没有用.然后我在某个地方看到了一个类似的例子,它使用了溢出:隐藏所以当我使用它时它将列表拉伸到最后.我想知道溢出做了什么这里和为什么宽度:100%不能做类似的动作?
  1. ul {
  2. list-style-type: none;
  3. padding: 0;
  4. margin: 0;
  5. overflow: hidden;
  6. background-color: black;
  7. }
  8. li {
  9. background-color: black;
  10. color: red;
  11. float: left;
  12. }
  13. li a{
  14. display: inline-block;
  15. color: white;
  16. text-decoration:none;
  17. padding: 20px;
  18. text-align: center;
  19. }
  20. li a:hover{
  21. background-color:red;
  22. }
  1. <!DOCTYPE html>
  2. <html lang="fa">
  3. <head>
  4. <link rel="stylesheet" type="text/css" href="menu.css">
  5. </head>
  6. <body>
  7. <ul>
  8. <li><a target="_blank" href="http://www.google.com">Google</a></li>
  9. <li><a target="_blank" href="http://www.yahoo.com">Yahoo!</a></li>
  10. <li><a target="_blank" href="http://www.Amazon.com">Amazon</a></li>
  11. </ul>
  12. </body>
  13. </html>

解决方法

使用溢出使元素拉伸以匹配其子元素时设置浮动属性 – 它基本上是实现clearfix的方法之一

猜你在找的HTML相关文章