为什么这个边界不可见?

时间:2013-07-28 18:10:59

标签: html css border

this page上,在右侧折页下方的TESTIMONIALS部分中,推荐内容(<article>标签中的文字有边框:

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

Google Chrome的开发者工具Computed Style查看器确认确实存在正确的边框,未被覆盖或其他任何内容:

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

然而,右边框不可见。谁能解释为什么?

3 个答案:

答案 0 :(得分:3)

.testimonial-entry.dark超越了你的容器。右边框位于容器外部,溢出被隐藏,因此您将看不到它。

让你的文章更窄。

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

答案 1 :(得分:2)

它没有显示,因为div太宽而且超出.container。包含它的section.one_half .last)宽度为451px.testimonial-entry.dark也是li,但li的父级将其移至一边

如果您在控制台上更改了margin-left: 18px的CSS -1px.single-testimonial_3 li {width:330px;} ,您会看到它,实际上是整个边框。

解决方案是让你的文章更加狭窄,你需要的元素是

{{1}}

答案 2 :(得分:1)

因为像div的ul这样的父html元素会使你的文章在宽度上没有足够的空间。现在有许多灵魂来完成这项工作。干净的解决方案,更多的工作和快速的灵魂与更少的工作。

一个快速的solutoin可以为你的文章提供一个固定的宽度,它适合父亲的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;
}