CSS 行为异常答案

【问题标题】：CSS behaving abnormallyCSS 行为异常
【发布时间】：2019-05-04 19:05:04
【问题描述】：

所以我尝试了一天，但我仍然无法做到。我为我的网站创建了一个新的索引页面。我从以前的主页复制了代码。

如果您在左侧（第一个主页）和右侧（新主页）看到滑块。您可以在新主页上看到滑块的行为异常。我无法在我的 CSS 中弄清楚为什么会发生这种情况。

我试过这个：

<div id="testimonial">
  <div id="black_title">
    <h1>Bead X Testimonials</h1>

  </div>
  <div class="bx-wrapper" style="max-width: 100%;">
    <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 232px;">
      <ul class="slide_left" style="width: 415%; position: relative; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-288px, 0px, 0px);">
        <li style="float: left; list-style: none; position: relative; width: 248px;" class="bx-clone">
          <iframe src="//player.vimeo.com/video/73331040" width="258" height="207" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> <a href="#">The Bead X Difference</a>
        </li>
        <li style="float: left; list-style: none; position: relative; width: 248px;">
          <img src="images/test_img.png"> <a href="#">The Bead X Difference</a>

        </li>
        <li style="float: left; list-style: none; position: relative; width: 248px;">
          <iframe src="//player.vimeo.com/video/73331040" width="258" height="207" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> <a href="#">The Bead X Difference</a>
        </li>
        <li style="float: left; list-style: none; position: relative; width: 248px;" class="bx-clone">
          <img src="images/test_img.png"> <a href="#">The Bead X Difference</a>

        </li>
      </ul>
    </div>
    <div class="bx-controls bx-has-pager">
      <div class="bx-pager bx-default-pager">
        <div class="bx-pager-item"><a href="" data-slide-index="0" class="bx-pager-link active">1</a>
        </div>
        <div class="bx-pager-item"><a href="" data-slide-index="1" class="bx-pager-link">2</a>
        </div>
      </div>
    </div>
  </div>
  <div class="navigation">
    <!-- <p><span id="left-prev"></span> <span id="left-next"></span></p> -->
    <div id="left-prev">
      <a class="bx-prev" href=""><img src="images/slider_prev.png" height="25" width="25"></a>
    </div>
    <div id="left-next">
      <a class="bx-next" href=""><img src="images/slider_next.png" height="25" width="25"></a>
    </div>
    <div id="read_more"> <a href="#">View all</a>

    </div>
  </div>
</div>

我所说的异常是指滑块中图像下方的文本溢出并且滑块的控件被弄乱了。

但结果仍然很奇怪。如何解决？

【问题讨论】：

您实际上并没有说出问题所在。定义“异常”。
@Utkanos 我已经更新了。
更好地提供与 html 分开的 css 代码并定义您的问题
@Dim_Ch 我正在使用 jquery bxslider
寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。

标签： javascript jquery html css

【解决方案1】：

不幸的是，这里有很多问题需要您处理。首先，看起来“Wax Daddys Promise”窗格是一个宽度为 269 像素的图像，但您尝试对齐的列是 275 像素，因此它不会正确填充该区域以提供良好的线条。

.testimonial 类的边距都不合适。

#testimonial {
    text-align: center;
    width: 95%;
    height: 310px;
    background: white;
    border: 4px solid rgb(209, 209, 209);
    margin: 15px 2px 2px 17px;
}

你应该使用：

margin: 15px 0 0 0;

或者更好：

margin-top: 15px;

这只是给自己一个顶级缓冲区。如果你给每个推荐类都一样，或者只是在所有这些上使用class="testimonial"，你会得到最高的分离。

这应该会有所帮助。将来您可能想研究引导程序，使网格布局变得非常简单，而无需深入了解自定义样式。希望对您有所帮助。

【讨论】：

谢谢，你能帮我处理其他事情吗？请问很严重。 ://
不幸的是，在查看您的页面时，您有很多导致问题的样式。 JRulle 似乎指出了一些修复，但您需要尽可能地清理您的样式。你会不断遇到这类问题。看起来一个大问题是.navigation a 上的一个边距属性将所有内容都推到了元素的一半......很抱歉没有提供更多帮助，但它都在你的风格中。

【解决方案2】：

您仍然需要进行一些格式化来清理布局，但这应该可以帮助您解决一些问题：

修改后的 CSS：

#read_more { float: right; }
.bx-next, .bx-prev { padding: 0px; }
#left-next, #left-prev { float: left; }
.bx-pager { padding: 0px; position: relative; top: 0; }

另外，在 #read_more 和 .bx-controls DIV 之后添加明确的修复：

<div style="clear: both;"></div>

【讨论】：