html - 带插入符号的 CSS 下拉菜单

Question

我正在尝试做这样的事情:

到目前为止我已经做了:

HTML:

<div class="panel-heading" data-toggle="collapse" href="#data2">
    <div class="heading">
        APPLICATION
    </div> 
    <span class="caret icon"></span
</div>

和CSS:

.panel-heading {
    padding: 0px;
    overflow: hidden;
}

.panel-heading>.heading {
    padding: 5px;
    float: left;
}

.panel-heading>.icon {
    float: right;
    background: yellow;
    height: 100%;
    padding: 5px 10px;
}

.item-detail .mini-title {
    font-size: 14pt;
    margin-bottom:5px;
    color: orange;
    font-weight: bold;
    margin-top: 10px;
}

.panel-heading {
    background: #FF6600;
}

.panel-body {
    background: #EAECED;
}

.caret {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #000000;
    width:1px;
}

JSFiddle 结果: JSFiddle

而且我不知道如何处理 div 的右侧。

我想让一个正方形变成黄色，剩下的是橙色。插入符应为黑色并居中于小方 block 中。

谢谢

Answer 1

您不能将图标类和插入符类添加到同一元素，因为您要使用边框来创建箭头。

尝试这样的事情:

<div class="panel-heading" data-toggle="collapse" href="#data2">
    <div class="heading">
        APPLICATION
    </div> 
    <div class="icon"><div class="caret"></div></div>
</div>

(它在你的 fiddle 中起作用)

为了让一个元素水平居中，我通常使用边距，将左右边距设置为'auto'，例如:

.caret { margin: 8px auto 0px auto; }

这将使您的元素居中并将其上边距设置为 8px