使菜单栏更接近 Web

Posted 2023-02-16

【中文标题】使菜单栏更接近 Web

【英文标题】：Aligning the menu bar closer to web

【发布时间】：2013-01-23 18:44:49

【问题描述】：

我是 Web 开发的新手，我现在正在学习 html 和 CSS。我正在使用 Firefox 18，我希望在浏览器标题附近有一个菜单栏（很像 Facebook 的蓝色菜单栏）。

虽然我已经创建了菜单栏，但我在对齐它时遇到了问题。我的问题： 1. 如何减少顶部、左右两侧的空间，使菜单栏紧贴Firefox？我尝试了填充，但它只改变了菜单栏上项目之间的空间，而不是栏的对齐方式。 2. 调整浏览器大小对栏的显示方式有影响吗？它是浏览器属性还是我可以从我编写的代码中取消调整菜单栏的大小？

谢谢！

【问题讨论】：

发布一些代码，以便我们看看。使用jsfiddle 之类的工具来创建我们可以看到的版本。

jsfiddle.net/cgVyv/embedded/result 谢谢！

它只在那里工作，因为“jsfiddle”有一个样式重置，看看我的回答

【参考方案1】：

你需要添加

*  margin: 0; padding: 0; 

在你的CSS顶部

--- 或 ---

使用重置

重置样式表的目标是减少浏览器在 诸如默认行高、页边距和标题字体大小之类的东西， 等等。

http://meyerweb.com/eric/tools/css/reset/

【讨论】：

谢谢埃里克！重置工作。今后，我会将它们添加到我所有的样式表中。

【参考方案2】：

Web 开发人员第一步：对Firebug 和 Chrome 的开发人员工具功能 [F12] 变得非常友好。这些工具使您可以快速查看哪些元素应用了导致您发生冲突的样式。然后，您可以在页面中进行更改以测试您的修复。

【讨论】：

萤火虫太棒了！谢谢！

【参考方案3】：

我认为您应该在 Google 上搜索一些 reset.css 或 normalize.css，因为您可能遇到了浏览器默认样式的问题。 Eric Meyer 的一个非常受欢迎，可以在这里找到http://meyerweb.com/eric/tools/css/reset/，但还有其他可用的。

这样做是删除浏览器默认应用的所有样式。从现在开始将其包含在您制作的每个页面中可能是一个好主意，以使您的样式在所有浏览器中保持一致。我永远不会没有它！