Question

我正在使用<ul>创建此标题菜单，我想将其拉伸到页面的所有顶部。我第一次使用width:100%但它没有工作。然后我在某个地方看到了类似的例子，它使用了overflow:hidden所以当我使用它时它将列表拉伸到最后。我想知道overflow在这里做了什么以及为什么width:100%无法执行类似的操作？

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

使用karma init使元素拉伸以匹配其子项设置overflow属性时 - 它基本上是实现 clearfix 的方法之一

Answer 2

li中的浮动属性会影响父级ul宽度100％。所以没有用。请尝试以下代码。

ul {
	list-style-type: none;
	padding: 0;
	background-color: black;
    width:100%;
    text-align:center;
}
li {
	background-color: black;
	color: red;
	width:33.3333%;
	float: left;
    
}
li a{
	display: inline-block;
	color: white;
	text-decoration:none;
	padding: 20px;
}
li: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>

什么＆＃34;溢出＆＃34;为这个<ul>标签做什么？

2 个答案: