border占居了宽度,导致子元素在父元素中换行问题解决

方法一:将border改成outline

outline是不占据父级空间的

.chess {
    width : 50px;
    height: 50px;
    outline: 2px solid lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

方法二: 将盒子设置成border-box

.chess {
    width : 50px;
    height: 50px;
    border: 2px solid lightgray;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
posted @ 2019-10-05 14:47  芥末Yuki  阅读(541)  评论(0编辑  收藏  举报