带插入符号的 CSS 下拉列表 [英] CSS dropdown with caret

问题描述

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

到目前为止我已经完成了:

HTML:

<div class="heading">应用
<span class="插入符号图标"></span

和CSS:

.panel-heading {填充:0px；溢出:隐藏；}.panel-heading>.heading {填充:5px；向左飘浮;}.panel-heading>.icon {浮动:对；背景:黄色；高度:100%；填充:5px 10px；}.item-detail .mini-title {字体大小:14pt；底边距:5px；颜色为橙色;字体粗细:粗体；边距顶部:10px；}.面板标题{背景:#FF6600；}.面板主体{背景:#EAECED；}.插入符{左边框:8px 实心透明；border-right: 8px 实心透明；边框顶部:8px 实心 #000000；宽度:1px；}

JSFiddle 结果:JSFiddle

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

我想让一个正方形变成黄色，剩下的就是橙色.插入符号应为黑色并以小方块为中心.

谢谢

解决方案

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

尝试这样的事情:

<div class="heading">应用
<div class="icon"><div class="caret"></div></div>

(它适用于你的小提琴)

要使元素水平居中，我通常使用边距，将左右边距设置为自动"，例如:

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

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

I am trying to make sth like this:

So far i have done:

Html:

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

And 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 result: JSFiddle

And i don't know how to handle right side of div.

I want to make a square a yellow color, and rest - orange. Caret should be black and centered in small square.

Thanks

解决方案

You cannot add the icon class and the caret class to the same element, because you want to use the borders to create the arrow.

Try something like this:

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

(It works in your fiddle)

To center an element horizontally, I usually use the margins, set the left and right margins to 'auto', for example:

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

this will center your element and set its top margin to 8px

这篇关于带插入符号的 CSS 下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！