纯纯前端小笔记

1. 如何做同级div对齐

以按钮为例,重点是vertical-align以及display: inline-block的修改.

.head_buttton
{
    position:relative;
    display: inline-block;
    width:100px;
    vertical-align: top;
    height: 46px;
    top: 1px;
    color:#FFF;
    background-color: #123566;
    
}
.head_buttton_choosed
{
    cursor:pointer;
    border-bottom: 3px solid #ff862d;

}

flex布局似乎更简单实现,下次可以改下试试

2. 制作类似tag标签样式

使用after伪类制作,感觉是不是要过气了....

.citybutton{
    position:relative;
    height: 20px;
    width: 60px;
    left: 15px;
    /* border:#bfbfbf 1px solid ; */
    background-color: #e7e6e6;
    margin-top: 6px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.citybutton::after{
    position:absolute;
    height: 0px;
    width: 0px;
    left: 60px;
    top: 0px;
    content: '';
    border-left: 9px solid #e7e6e6;
    border-right: 14px solid transparent;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}