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;
}

猜你喜欢

转载自www.cnblogs.com/zhizhi0810/p/11624692.html