如何避免在div列表上出现双边框 [英] How to avoid double borders on list of divs

问题描述

我有一个用作FAQ的div列表.有时div彼此之间列出，有时它们之间有文字. 当它们在彼此下面列出时，我遇到了带有双重边框的问题，我不知道该怎么解决.

I have a list of divs which are used as a FAQ. Sometimes the divs are listed below each other, sometimes there is text between them. When they are listed below one other, I have this issue with double borders which I don't know how to solve.

请参见此小提琴.

HTML

<div class="faq">
<div class="faqheader">Toggle 1</div>
  <div class="faqcontent">Content 1</div>
</div>

<p>Some text...</p>

<div class="faq">
<div class="faqheader">Toggle 2</div>
  <div class="faqcontent">Content 2</div>
</div>

<p>Some text...</p>

<div class="faq">
<div class="faqheader">Toggle 3</div>
  <div class="faqcontent">Content 3</div>
</div>

<div class="faq">
<div class="faqheader">Toggle 4</div>
  <div class="faqcontent">Content 4</div>
</div>

CSS

.faq {width:200px;border: 1px solid #ddd;}
.faqheader {height:20px;font-weight: bold;cursor: pointer;}
.faqcontent {display:none;height:50px;}

div必须有边框:border:1px solid #ddd

The divs need to have a border: border:1px solid #ddd

当div之间有文本(切换1和2)时，边框看起来很好，但是当它们彼此靠近(切换3和4)时，边框看起来不太好.

The borders look fine when there's text between the divs (toggle 1 and 2), but when they are close together (toggle 3 and 4), it doesn't look very nice.

此时，不能更改标记.它们是动态生成的.有没有办法用CSS或jquery来解决此问题?

Changing the markup is not an option at this point. They are generated dynamically. Is there any way to fix this issue with either css or jquery?

推荐答案

将此规则添加到您的 CSS

.faq + .faq
{
    border-top: none;
}

说明:紧随另一个.faq之后的.faq没有顶部边框.

Explanation: .faq that comes directly after another .faq dont get a top border.

1. 这是一个纯CSS解决方案(没有脚本)
2. 它不会假设布局如何(div不必是容器的最后一个子代，也不必是某个特定的索引)
3. 它解决了双边框问题，即使它们相互之间是多个.faq.
4. 它是一个跨浏览器解决方案.

1. this is a pure CSS solution (without Script)
2. it doesnt assume anithing about the layout (the div's dont have to be last childs of a container, or at some specific index)
3. its fixes the double border issue even if their are multiple .faq one after each other.
4. its a cross browser solution.

查看此> 工作小提琴

这篇关于如何避免在div列表上出现双边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！