我正在使用< ul>创建此标题菜单我想将它拉伸到页面的所有顶部.我首先使用宽度:100%但它没有用.然后我在某个地方看到了一个类似的例子,它使用了溢出:隐藏所以当我使用它时它将列表拉伸到最后.我想知道溢出做了什么这里和为什么宽度:100%不能做类似的动作?
- ul {
- list-style-type: none;
- padding: 0;
- margin: 0;
- overflow: hidden;
- background-color: black;
- }
- li {
- background-color: black;
- color: red;
- float: left;
- }
- li a{
- display: inline-block;
- color: white;
- text-decoration:none;
- padding: 20px;
- text-align: center;
- }
- li a:hover{
- background-color:red;
- }
- <!DOCTYPE html>
- <html lang="fa">
- <head>
- <link rel="stylesheet" type="text/css" href="menu.css">
- </head>
- <body>
- <ul>
- <li><a target="_blank" href="http://www.google.com">Google</a></li>
- <li><a target="_blank" href="http://www.yahoo.com">Yahoo!</a></li>
- <li><a target="_blank" href="http://www.Amazon.com">Amazon</a></li>
- </ul>
- </body>
- </html>