如何调试CSS布局?

时间:2011-04-26 13:41:00

标签: css layout

打开this navbar中的联系人菜单,您会发现它有点偏向右侧。

  1. 这是为什么?
  2. 如何在不问SO的愚蠢问题的情况下自行调试这些问题?我正在使用Firebug的布局工具,但我并不真正理解为什么会发生这种情况。

4 个答案:

答案 0 :(得分:4)

凯万万诺说的是什么 并且请考虑使用浏览器工具来调试这些东西 有:

  • IE中的开发者工具
  • Firefox的FireBug插件
  • 和chrome中的开发人员工具

以及主页任务研究“css reset”
不同的浏览器对于没有定义样式的文档的元素具有不同的默认样式。这些样式也包括填充和边距。这就是为什么你没有填充重置的原因。

答案 1 :(得分:1)

在您的css元素padding-left: 0px;

中设置#wd-navbar ul

答案 2 :(得分:1)

以下是解释如何使用firebug调试CSS的视频:http://www.youtube.com/watch?v=pDhhM4-o_VE&feature=player_embedded#at=313

当然,您需要首先了解CSS的基础知识和框模型:http://www.w3schools.com/css/css_boxmodel.asp

答案 3 :(得分:0)

现在有一个新工具可视化鼠标悬停在任何元素上的空间:

HTML Box Visualizer - GitHub