css - 这里的li元素宽度为什么不是没有相对于父元素

问题描述

问 题

<figure>
    
        <ul>
        
            <li>
                figure边框为灰色<br>
                ul边框为红色<br>
                li边框为黑色<br>
                li的宽度为100%，所以li的宽度应该和她父元素ul的宽度一样，对吗？<br>
                可是为什么li的宽度和figure的宽度是一样的
                
            </li>
            <li>
                
            </li>
            <li>
                
            </li>
            <li>
                
            </li>
        </ul>
    </figure>

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

li {
    list-style-type: none;
}

figure {
    width: 100%;
    height: 400px;

    border: 10px solid #999;
}

ul {
    width: 400%;
    height: 400px;

    display: flex;
    flex-direction: row;

    border: 1px solid red;
}

li {
    width: 100%;
    height: 100%;

    border: 5px solid #000;
}

解决方案

因为ul这两条属性的影响

display: flex;
flex-direction: row;

和li这个属性的影响

width:100%

你把li的个数留一个再试试

补充一下：width：100%还是生效了的，但是并列子元素的宽度和大于了父元素宽度，由于你没有设置li的flex-shrink跟flex-basis，默认以width作为flex-basis，初始width都是100%，则100%：100%：100%：100% = 1：1：1：1压缩(比如4个li加起来超出了800px,则各自在原有宽度上减去200px)，所以都是ul的1/4宽度。

压缩比例计算方法：压缩比= ‘元素1’的flex-basisXflex-shrink：‘元素2’的flex-basisXflex-shrink：‘元素3’的……

这篇关于css - 这里的li元素宽度为什么不是没有相对于父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！