标题栏的实现

最新推荐文章于 2021-12-09 16:46:08 发布

火神大我_2015

最新推荐文章于 2021-12-09 16:46:08 发布

阅读量314

点赞数

本文链接：https://blog.csdn.net/huoshendawo_mo/article/details/49494335

版权

<div>
	                <div id="statusTitle">最新动态</div>
	                <div id="statusDetail">
	                	<div class="compatibility-inline-block"><i class="fa fa-circle status-list"></i>今天到账返费总额<b>33000.00</b>元  </div>
	                	<div class="compatibility-inline-block"><i class="fa fa-circle status-list"></i>招聘信息新增数量<b>2</b>条 </div>
	                	<div class="compatibility-inline-block"><i class="fa fa-circle status-list"></i>目前在操作的订单数量<b>0</b>条</div>
	                </div>
	            </div>

.main #statusDetail {
    margin-right: 20px;
    background-color: #ffffff;
    border-left: 1px solid #E9E9E9; //边框的颜色
    border-right: 1px solid #E9E9E9;<pre name="code" class="css">

border-bottom: 1px solid #E9E9E9;}

.compatibility-inline-block {
    display: inline-block; //三个div平行的在一行上
}

.main #statusDetail div {
    width: 31%;
    text-align: center;
    font-size: 16px;
    vertical-align: middle;
    height: 30px;            
    line-height: 30px;
    white-space: nowrap;    //拉伸的时候的显示...
    text-overflow: ellipsis;//拉伸的时候的显示..
    overflow: hidden;       //拉伸的时候的显示
}