WordPress 上的 CSS 问题答案

【问题标题】：Problem with CSS on WordpressWordPress 上的 CSS 问题
【发布时间】：2011-08-04 05:58:16
【问题描述】：

我正在尝试对我的 sidebar.php 进行编码，但它会中断并一直向下移动到帖子下方

PHP：

<!-- begin sidebar -->
<div id="menu">
<?php  /* Widgetized sidebar, if you have the plugin installed. */
  if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

    <label for="s">SEARCH</label>
    <form id="searchform" method="get" action="#">
      <div>
        <input type="text" name="s" id="s" size="15" />
        <br />
        <input type="submit" value="TYPE HERE_" />
      </div>
    </form>
  <div class="bg-sidebar">
    <h2>MOST READ</h2>
    <ul>
      <li><a href="javascript:void(0);">Worth A Thousand Words</a></li>
      <li><a href="javascript:void(0);">Feed Your Head</a></li>
      <li><a href="javascript:void(0);">Aliquam tempus, eros commodo porta pretium</a></li>
      <li><a href="javascript:void(0);">Pellentesque quis libero dui</a></li>
      <li><a href="javascript:void(0);">Lorem ipsum dolor sit amet</a></li>
    </ul>
    <h2>RECENT POSTS</h2>
    <ul>
      <li><a href="javascript:void(0);">Worth A Thousand Words</a></li>
      <li><a href="javascript:void(0);">Feed Your Head</a></li>
      <li><a href="javascript:void(0);">Aliquam tempus, eros commodo porta pretium</a></li>
      <li><a href="javascript:void(0);">Pellentesque quis libero dui</a></li>
      <li><a href="javascript:void(0);">Lorem ipsum dolor sit amet</a></li>
    </ul>
    <h2>ARCHIVE</h2>
    <ul>
      <li>
        <?php wp_get_archives('type=monthly'); ?>
      </li>
    </ul>
    <h2>LINKS</h2>
    <ul>
      <li><a href="http://www.t.com">t</a></li>
      <li><a href="http://www.tt.com">tt</a></li>
    </ul>
  </div>
  <?php endif; ?>
</div>

CSS：

* { margin: 0; padding: 0; }
body, input { font-family: "Trebuchet MS"; font-size: 12px; }
.move { clear: both; height: 0; float: none !important; }
body { background: url(images/bg.gif); width: 991px; position: absolute; top: 0; left: 50%; margin: 0 0 0 -495px; padding: 0 0 71px 0; }
a { text-decoration: none; }
li { list-style: none; }
img { border: 0; }

 #searchform { float: left; width: 366px; height: 27px; }
 #searchform * { float: left;}
 #searchform label { width:75px; height: 26px; border: solid 1px #ab0000; border-width: 1px 1px 0 0; text-align: center; line-height: 25px; font-weight: bold; font-size: 18px; color: #ab0000; background: white; }
 #searchform p { border-bottom: solid 1px #ab0000; width: 290px; height: 25px; }
 #searchform input { border: 0; margin: 6px 0 0 10px; display: inline; width: 234px; font-weight: bold; color: #999999; background: transparent; outline: none; height: 16px; }
 #searchform button { background: url(images/btn_vai.gif); width: 34px; height: 24px; border: 0; margin: 0 0 2px 0; float: right; }

#menu { width: 366px; height: 40px; float: left; margin: 1px 0 0 0; }
.bg-sidebar { background: white; width: 366px; padding: 50px 0 0 0; }
#menu h2 { color: #ab0000; font-size: 18px; line-height: 18px; padding: 0 0 10px 15px; }
#menu ul { border-top: solid 1px #d5d5d5; padding: 0 0 38px 0; }
#menu li { border-bottom: solid 1px #f3f2f2; line-height: 30px; font-size: 13px; font-weight: bold; padding: 0 0 0 24px; }
#menu li a { color: black; }

有人可以帮我解决这个问题吗？

【问题讨论】：

欢迎来到 SO。请解释会发生什么并提供查看链接或屏幕截图。我认为没有人能够在头脑中解析 HTML 和 CSS 并找到错误。
也取决于您的网站和内容容器（帖子所在的位置）的范围。如果没有这些知识，我怀疑这里的任何人都可以帮助你。

标签： css wordpress sidebar

【解决方案1】：

位于 Wordpress 内容下方的侧边栏通常只是缺少一个或两个结束 </div> 标签。使用The W3C Markup Validation Service 的xhtml 代码验证器查看您的站点和页面。勾选选项中的“显示源代码”框，您将获得一个代码列表，它将指出您的哪些主题文件有问题。比较侧边栏位置正确的页面和损坏的页面。

【讨论】：

【解决方案2】：

侧边栏可能会向下倾斜的另一个原因是它太宽而无法在空间内浮动。我无法从您提供的代码中看出，但如果页面的全宽设置为 966 像素且侧边栏为 366 像素，则主要区域内容应为 600 像素（或更少，取决于边距和填充）。尝试缩小侧边栏或主体内容。

如果这些建议都不起作用，我建议在此处发布指向您页面的链接。这样你会得到更好的答案。

【讨论】：

【解决方案3】：

我遇到了同样的问题。一旦我减少了身体的宽度和小部件区域中的浮动元素，我的就被修复了。还尝试使用 CSS 中的位置元素。我的试了几次就修好了。

【讨论】：