Question

我正在帮助客户解决以下问题：主文本在较小的宽度上与边栏重叠，但是当文本足够小时，边栏就会消失。通过将窗口水平缩小，可以看到重叠的文本。他们正在使用SimplePress主题。我还查看了stylesheet.css，发现有很多错误指示符，但不确定是否是引起错误的指示符。侧边栏CSS中的一个错误是：“使用宽度加上左侧的填充有时可能会使元素大于您的预期。”

知道这可能是什么吗？

编辑： 我还将包含修复此问题的相关前后CSS以及上下文。

主题的style.css（之前）：

    #sidebar { float: left; width: 250px; padding-left: 30px; padding-top: 10px; }
    #sidebar .widget { margin-bottom: 30px; float: left; }
      .widget ul { padding-left: 13px;}
      .widget ul li { padding: 3px 0 3px 5px; list-style-image: url(images/bullet.png); }
      .widget ul li a { color: #525252; }
      .widget ul li a:hover { color: #000; }
      .widget h3 { font-size: 24px; color: #000; display: block; background: url(images/widget-line.png) no-repeat bottom left; padding-bottom: 10px; margin-bottom: 10px; }
      #search-bar { float: left; }
        #search-bar #searchinput {background: url(images/search-bg.png) no-repeat; width: 175px; height: 35px; border: none; float: left; padding-left: 10px; padding-right: 10px; }
    #posts { float: left; width: 640px; padding-right: 40px; }
    #posts_full { width: 960px; }
      #posts_full .post_full { width: 960px; }
      #posts .post { float: left; margin-bottom: 40px; }
        .post .text { float: left; width: 426px;}
        #posts .post .no_thumb { width: 640px; }

最后一行（style.css文件中的第148行）必须更改：

#posts .post .no_thumb { width: 640px; }

之后：

#posts .post .no_thumb { width: 100%; }

Answer 1

在style.css的第148行，更改以下内容：

#posts .post .no_thumb {
 width: 640px;
}

进入：

#posts .post .no_thumb {
 width: 100%;
}

WordPress站点文本在较小的屏幕宽度上重叠侧边栏

1 个答案: