当由ul,li,/ li标签包围时,CSS块向右移动

时间:2011-06-17 11:17:02

标签: html css html-lists

我正在使用ul和li标签的组合作为菜单,我使用显示框和背景颜色将其显示为按钮问题是我一旦用li包围a标签按钮似乎正在转移到右边有点像缩进或什么的。

我试过

list-style: none;

但是没有用,任何人都可以建议解决这个问题..

感谢任何帮助将不胜感激

感谢大家为所有答案付出的努力

4 个答案:

答案 0 :(得分:9)

padding-left上的margin-leftul设置为0。

答案 1 :(得分:4)

您是否重置了默认的边距和填充样式?

ul,li {
margin:0;
padding:0;
}

答案 2 :(得分:2)

您应该检查UL和LI元素的边距和填充,并将它们设置为特定值。如:

margin: 0;
padding: 5px;

UL通常被设计为显示左侧的缩进,尽管在某些浏览器中它也可能是LI(我相信)。

在Firefox(w / Firebug),Chrome和IE9中,您可以使用可用的开发人员工具检查应用的样式。这真的有助于了解在显示的元素中出现问题的位置。

http://getfirebug.com/html

另外,如果您以前没有看过它,请查看包装盒型号:

http://www.w3.org/TR/CSS2/box.html

答案 3 :(得分:1)

浏览器会为ul和/或li元素提供默认边距和/或填充。尝试将margin: 0; padding: 0添加到ul, li {}

更好的是,使用CSS重置来节省您使用此功能以及许多其他元素的麻烦。我推荐这个:http://meyerweb.com/eric/tools/css/reset/