带插入符号的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的右侧。

我想把正方形变成黄色，然后休息 - 橙色。插入物应该是黑色的并且以小方块为中心。

由于

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>

（它适用于你的小提琴）

为了使元素水平居中，我通常使用边距，将左右边距设置为＆＃39; auto＆＃39;，例如：

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

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