在 WordPress 主题中找不到父元素
我一整天都在开车前往阿卡姆疯人院，试图找出为什么我在该网站顶部的 div 无法正常工作
包含链接和搜索的 div 未正确排列。我尝试了常见的方法，例如在标题中的 div 周围添加不同颜色的 20px 边框，以识别需要编辑的边框，但边框没有显示，所以有东西覆盖了它们，对于我来说，我不能'不明白什么。
我还尝试添加溢出：隐藏；对标头中的所有元素（div#search div#header div#head bar 等...）以及#body 元素和#wrapper 无效。
我对 css 相当陌生，所以如果有人能告诉我要更改哪个元素以及我会使用什么，我将永远感激您并为正确的答案投上明确的一票！
谢谢你！
I have been driving myself to Arkham Asylum status all day trying to figure out why my divs on the top of this site aren't working correctly
The divs that contain the links and the search aren't lining up correctly. I tried the usual suspects like adding a 20px border in different colors around the divs in the header to identify which one needed to be edited, but the borders don't show up so something is overriding them and for the life of me I can't figure out what.
I also attempted adding overflow:hidden; to all the elements in the header (div#search div#header div#head bar etc. . . ) and in addition the #body element and the #wrapper to no effect.
I am fairly new to css so if anyone can tell me which element to change and what I would use I will bless you with eternal gratitude and a definite vote for the right answer(s)!
Thank you!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您是否尝试过检查 Chrome 开发工具或 Firebug 中的元素？这样做将向您显示当前正在应用的所有 CSS 样式，并允许您实时编辑它们以找出需要进行哪些更改。
要检查，只需右键单击有问题的元素/区域并选择检查元素。
Have you tried inspecting the elements in the Chrome dev tools or Firebug? Doing that will show you all the CSS styles currently being applied, and allows you to edit them in real time to figure out what changes you need to make.
To inspect just right-click on the element/area in question and select inspect element.
为了确保您设置的边框显示出来，请尝试将它们设置为 !important。这应该可以帮助您调试问题。
To make sure that the borders you are setting are showing up, try setting them to !important. That should help you debug the issue.
我注意到的第一件事是你的 div 是浮动的。我使用定位将 div 放在我想要的位置时运气更好。这是一些示例代码（通常样式位于 css 文件中），
这将允许您将 div 排列到您的确切布局。
The first thing that I noticed is that you are floating your divs. I have had better luck using positioning to put divs where I would like them to go. Here is some example code (normally styling would be in css file)
This will allow for you to line up the divs to your exact layout.
这些人是对的，你需要学习使用 Firebug！它会为您节省数小时的时间。
例如，在 firebug 中使用 10 秒，我可以看到将位于此处 /wp-content/w3tc/min/e4c7880c.00cd94.css 第 2095 行的 CSS 文件更改为 margin-top:14px 至 0px；将使您的搜索框与导航菜单内联。
我还会删除clear:both;来自搜索元素。据我所见，它不需要它。相反，我会添加clear:both;围绕第 2054 行到#inner，以防止下一个水平 div 与浮动标题元素重叠。
然后我会从第 2062 行的“#header #inner #logo a”元素中删除 -22px 顶部，因为它会导致更多重叠问题。我会调整徽标元素的高度以匹配您的图形文件，而不是负顶部。因此，在第 2058 行，我将 height:99px 更改为 height:122px，这是徽标的正确高度。 （要么将徽标的高度调整为 99 像素）。
好了，我用 Firebug 在您的网站上测试了所有这些更改！
These guys are correct, you need to learn to use Firebug! It'll save you hours of time.
For exmaple with 10 seconds in firebug I can see that changing your CSS file located here /wp-content/w3tc/min/e4c7880c.00cd94.css at Line 2095 to the margin-top:14px to 0px; will get your search box to be inline with navigation menu.
I would also remove the clear:both; from the search element. It doesn't need it from what I can see. Instead I would add the clear:both; around Line 2054 to #inner to keep the next horizontal div from overlapping your floated header elements.
Then I'd remove the -22px top from the "#header #inner #logo a" element at Line 2062 as it causes more overlapping issues. Instead of the negative top, I'd adjust the height of the logo element to match your graphics file. So at line 2058 I'd change the height:99px to be height:122px which is the correct height for your logo. (Either that or resize your logo to be 99px in height).
There you have, I tested all of these changes on your site live with Firebug!