Question

我手风琴嵌套如下：-

<div class="tab-pane" id="Products" role="tabpanel" aria-labelledby="Products-tab">
                    <a class="btn btn-link" role="link" href="#" onclick="ShowNew();"> + Add New Product</a>
                    <div class="panel panel-primary">
                        <div class="panel-heading clickable">
                            <h3 class="panel-title">
                                <span><i class="glyphicon glyphicon-minus"></i> CG6300</span>
                            </h3>
                        </div>
                        <div class="panel-body">
                            <a class="btn btn-link" role="link" href="#" onclick="ShowNew();"> + Add New Version</a>

                            <div class="panel panel-primary">
                                <div class="panel-heading clickable panel-collapsed">
                                    <h3 class="panel-title">
                                        <span><i class="glyphicon glyphicon-minus"></i> V0100</span>
                                    </h3>
                                </div>
                                <div class="panel-body">
                                    <a class="btn btn-link" role="link" href="#" onclick="ShowNew();"> + Add New Module</a>
                                    <div class="panel panel-primary">
                                        <div class="panel-heading clickable panel-collapsed">
                                            <h3 class="panel-title">
                                                <span><i class="glyphicon glyphicon-minus"></i> Tilt</span>
                                            </h3>
                                        </div>
                                        <div class="panel-body">
                                            <a class="btn btn-link" role="link" href="#" onclick="ShowNew();"> + Add New Document</a>
                                            <div class="panel panel-primary">
                                                <div class="panel-heading clickable panel-collapsed">
                                                    <h3 class="panel-title">
                                                        <span><i class="glyphicon glyphicon-minus"></i> 123</span>
                                                    </h3>
                                                </div>
                                                <div class="panel-body">
                                                    Panel content
                                                </div>
                                            </div>
                                            <div class="panel panel-primary">
                                                <div class="panel-heading clickable panel-collapsed">
                                                    <h3 class="panel-title">
                                                        <span><i class="glyphicon glyphicon-minus"></i> 456</span>
                                                    </h3>
                                                </div>
                                                <div class="panel-body">
                                                    Panel content
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-primary">
                                <div class="panel-heading clickable panel-collapsed">
                                    <h3 class="panel-title">
                                        <span><i class="glyphicon glyphicon-minus"></i> V0200</span>
                                    </h3>
                                </div>
                                <div class="panel-body">
                                    Panel content
                                </div>
                            </div>


                        </div>
                    </div>

                    <div class="panel panel-primary">
                        <div class="panel-heading clickable">
                            <h3 class="panel-title">
                                <span><i class="glyphicon glyphicon-minus"></i> CG6301</span>
                            </h3>
                        </div>
                        <div class="panel-body">
                            Panel content
                        </div>
                    </div>
                </div>

我需要什么？

我想删除所有手风琴的边框，但不删除第一个父级的边框。因此，在屏幕截图中，只有带有文本“ CG6300”和“ CG6301”的父手风琴需要显示边框。
需要将所有子手风琴正确对齐到第一个父手风琴。

到目前为止我做了什么？

对于删除边框，我使用样式

.panel {
        border: 0;
    }

但它会删除所有边框。

为了对齐，我不知道从哪里开始。

非常感谢您的帮助。我对CSS不好。

Answer 1

要删除.panel个孩子而不是.panel父母的边框，

.panel .panel {
    border: 0;
}

.panel .panel选择器仅将样式应用于具有panel类的父元素内部的panel类的元素。另外，您可以为子元素分配一个新类，然后仅以边框样式定位该类。

有关各种CSS选择器的更多信息和示例，请查看the list on W3Schools。

要将所有子手风琴对齐到父手风琴的右侧，您需要从panel-body类中删除右侧填充：

.panel-body {
    padding-right: 0;
}

要获得此解决方案，您需要了解CSS Box Model。

嵌套的手风琴-仅显示第一个父引导3的边框

1 个答案: