Question

如何强制水平列表（菜单）中的所有项目都具有相同的宽度？

到目前为止，这是我的CSS代码：

a { text-decoration:none; }
#navlist ul { margin:0; padding:0; list-style-type:none; }
#navlist ul li { display:inline; }
#navlist li a {
  padding:10px;
  margin:2px;
  background:grey;
  color:white;
}
#navlist li a:hover {
  color:white;
  background:black;
}

编辑：

现在可以通过将前3行改为：

来实现（感谢@Gaby）

#navlist ul { margin:0; padding:0; list-style-type:none; }
#navlist ul li { float:left; text-align:center; }
#navlist ul li a { text-decoration:none; display:block; width:120px; }

Answer 1

浮动元素并将其设为block而不是inline

#navlist ul { margin:0; padding:0; list-style-type:none; overflow:auto; }
#navlist ul li { display:block;width:100px;float:left; }

您可能也希望将a设为block，以填充li并使其全部可点击..

强制宽度菜单项水平列表（CSS）

1 个答案: