html - 为什么这个边框不可见？

Question

在此页面上，在右侧折叠下方的 TESTIMONIALS 部分中，推荐的内容（<article>标签中的文本有边框：

.testimonial-entry.dark {
    background-color: #F6F6F5;
    border: 1px solid #D9D9D9;
}

谷歌浏览器的开发者工具计算样式查看器确认确实有一个正确的边框，它没有被覆盖或任何东西：

border-right-color: rgb(217, 217, 217);
border-right-style: solid;
border-right-width: 1.1111111405455043px;

然而，右边框是不可见的。谁能解释为什么？

score 3 · Accepted Answer

.testimonial-entry.dark超出了您的容器。右边框在你的容器之外，溢出是隐藏的，所以你不会看到它。

让你的文章更窄。

.testimonial-entry dark {width: 315px; }应该解决它。

score 2 · Accepted Answer

它没有显示，因为 div 太宽并且超出了外面.container。section包含它 ( .one_half .last) 很451px宽，但.testimonial-entry.dark它的li父级将它移到一边。

如果您在控制台上更改您li的 CSS margin-left: 18px，-1px您将看到它，实际上是整个边框。

解决方案是让你的文章更窄，你需要影响的元素是

.single-testimonial_3 li {width:330px;}

score 1 · Accepted Answer

因为像 div 的 ul 这样的父 html 元素给你的文章在宽度上没有足够的空间。现在有很多人想得到这项工作。用更多的工作清洁解决方案，用更少的工作快速解决问题。

一种快速的解决方案是为您的文章提供一个固定的宽度，使其适合父 html 元素。http://wowballoons.com/wp-content/themes/nevada/nevada/style.css?ver=1.6中的第 844 行

.testimonial-entry.dark {
    background-color: #F6F6F5;
    border: 1px solid #D9D9D9;
    width: 316px;
}

3 回答 3