Question

如果不包含位置相对，则溢出隐藏不适用于list-element。我不希望div：s上没有静态宽度，而且更喜欢在没有任何脚本的情况下解决它。代码看起来像这样。 https://jsfiddle.net/pbahhtce/3/

<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        position: relative;
    }

    li {
        height: 1.5em;
        overflow: hidden;
        transition: width 1000ms linear 0s;
    }

    div {
        background: rgb(255,0,0);
        background: -moz-linear-gradient(left,  rgba(255,0,0,1) 0%, rgba(255,240,0,1) 50%, rgba(0,255,0,1) 100%);
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,0,0,1)), color-stop(50%,rgba(255,240,0,1)), color-stop(100%,rgba(0,255,0,1)));
        background: -webkit-linear-gradient(left,  rgba(255,0,0,1) 0%,rgba(255,240,0,1) 50%,rgba(0,255,0,1) 100%);
        background: -o-linear-gradient(left,  rgba(255,0,0,1) 0%,rgba(255,240,0,1) 50%,rgba(0,255,0,1) 100%);
        background: -ms-linear-gradient(left,  rgba(255,0,0,1) 0%,rgba(255,240,0,1) 50%,rgba(0,255,0,1) 100%);
        background: linear-gradient(to right,  rgba(255,0,0,1) 0%,rgba(255,240,0,1) 50%,rgba(0,255,0,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#00ff00',GradientType=1 );

        height: 1em;
        position: absolute;
        width: 100%;
    }
</style>

<ul>
     <li style="width: 100%"><div></div></li>
     <li style="width: 75%"><div></div></li>
     <li style="width: 50%"><div></div></li>
     <li style="width: 25%"><div></div></li>
</ul>

这应该是https://jsfiddle.net/pbahhtce/6/的样子。但我希望div元素为100％，以便在不使用媒体查询的情况下使渐变完全响应。

Answer 1

你想隐藏什么？ <li>个元素中没有任何内容。您的渐变背景将应用于<ul>。请参阅下面的小提示 - 如果您将背景应用于<li>，则符合您的宽度规格。

很抱歉，如果我误解了这个问题。

https://jsfiddle.net/pbahhtce/1/

编辑：

更新了您的小提琴，在position: relative;上添加了<li>，它运行正常。你在找别的吗？

https://jsfiddle.net/pbahhtce/5/

Answer 2

不确定为什么位置：亲戚在这里对你来说是一个问题，但你可以放弃位置：在div上绝对来解决溢出问题。

请参阅http://jsfiddle.net/pbahhtce/2/

div {
 /* position:absolute; */
 background:black; /* for demonstration purposes */
}

溢出隐藏无位置相对

2 个答案: