添加更多子级时如何自动更改div边框

Question

我的标记如下所示：

<div class='faq_details'>
    <li class='faq_quest'>
        <a class='faq_row_question'>" + question</a>
    </li>
</div>

我从XML文件中读取问题，并以HTML格式显示。 现在，当单击和代码为时，我想为每个问题添加答案：

$(".faq_row_question").click(function () {
    var answer = xml.find('row').eq(0).find('answer').text();
    $(this).append( answer );     
});

CSS代码：

.faq_details {
    position:relative;
    height: 30px;
    border: 1px solid;
    border-color: gainsboro;
    margin-right: -24px;
    padding-right: 17px;
    border-radius: 2px;
    padding-top: 12px;
}

如您所见，每个问题都在边界内。

我想在问题div的同一边框内单击时添加答案。

我该如何管理？ 有什么建议么？

Answer 1

这是因为您正在为班级使用固定高度。
您需要像下面这样使用最小高度：

.faq_details {
  position: relative;
  min-height: 30px; //Use min-height here
  border: 1px solid;
  border-color: gainsboro;
  margin-right: -24px;
  padding-right: 17px;
  border-radius: 2px;
  padding-top: 12px;
}