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

Posted zhizhi0810

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;

以上是关于border占居了宽度,导致子元素在父元素中换行问题解决的主要内容,如果未能解决你的问题,请参考以下文章

如何去掉HTML中换行造成的空格

浮动之后子元素在父元素哪个位置

使用 xforms 在元素中换行

即使没有悬停在父级上,子元素也会出现

inline-flex 输入元素在 IE11 中换行

如果段落在 PdfPCell 中换行,如何保持缩进?