我正在尝试做这样的事情:
到目前为止我已经做了:
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 中。
谢谢
最佳答案
您不能将图标类和插入符类添加到同一元素,因为您要使用边框来创建箭头。
尝试这样的事情:
<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
关于html - 带插入符号的 CSS 下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23513649/