Question

我一直在驾驶自己到Arkham Asylum状态试图找出为什么我这个网站顶部的div不能正常工作

touchoflunacy.com

包含链接和搜索的div未正确排列。我尝试了常见的嫌疑人，比如在标题中的div周围添加不同颜色的20px边框，以确定哪一个需要编辑，但边框没有显示，所以有些东西覆盖了它们，对于我的生活，我可以'弄清楚是什么。

我还尝试添加overflow：hidden;标题中的所有元素（div＃search div＃header div＃head bar ...）以及＃body元素和#wrapper无效。

我对css很新，所以如果有人能告诉我要改变哪个元素以及我会用什么，我将以永恒的感激和对正确答案的明确投票来祝福你！

谢谢！

Answer 1

您是否尝试过检查Chrome开发工具或Firebug中的元素？这样做会显示当前正在应用的所有CSS样式，并允许您实时编辑它们以确定需要进行哪些更改。

要检查只需右键单击相关元素/区域，然后选择检查元素。

Answer 2

要确保您正在设置的边框显示，请尝试将它们设置为！important。这应该可以帮助您调试问题。

div {
    border: 1px solid #F00 !important;
}

Answer 3

我注意到的第一件事是你漂浮了你的div。我有更好的运气使用定位将div放在我希望他们去的地方。这是一些示例代码（通常样式将在css文件中）

<div style="position:relative;width:500px;height:28px;"><!-- Wrapper -->
 <div style="position:abolute;top:0;left:0;width:100px;">CONTENT</div> <!--first div located top left -->
 <div style="position:abolute;top:0;left:400px;width:100px;">CONTENT</div> <!--second div located top right -->
</div>

这将允许您将div排列为您的确切布局。

Answer 4

这些家伙是对的，你需要学习使用Firebug！这会节省你几个小时的时间。

对于firebug中的10秒钟，我可以看到将位于此处的CSS文件/wp-content/w3tc/min/e4c7880c.00cd94.css更改为第2095行至margin-top：14px至0px;将使您的搜索框与导航菜单一致。

我也会删除明确的：两者;来自搜索元素。它从我所看到的不需要它。相反，我会加上明确的：两者;在2054行到#inner，以防止下一个水平div与浮动的标题元素重叠。

然后我将从第2062行的“#header #inner #logo a”元素中删除-22px顶部，因为它会导致更多重叠的问题。而不是负顶部，我会调整徽标元素的高度以匹配您的图形文件。因此，在第2058行，我将更改高度：99px为高度：122px，这是您的徽标的正确高度。（或者将您的徽标调整为99px高度）。

你有，我在你的网站上用Firebug测试了所有这些变化！

在wordpress主题中找不到父元素

4 个答案: