Question

所以我这里有一个奇怪的问题，我的文本动画需要将li元素定位为绝对值。这导致它流出文档流，我无法在li下正确对齐文本而不添加填充。我想直接在ul下面显示i元素。我做了一个代码https://jsfiddle.net/m479w3sj/

的小例子

<div id="head">
    <ul>
        <li>Text 1</li>
        <li>Text 2</li>
        <li>Text 3</li>
        <li><span style="color: #00a9ac">Text 4</span></li>
    </ul>

    <a class="arrow" href="#main"><i class="fa fa-arrow-down"></i></a>
</div>

CSS

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

#head ul {
    list-style-type: none;
}

#head ul li {
    position: absolute;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    transition: opacity .5s ease-in;
    font-size: 50px;
    font-weight: bold;
    color: #E3E3E3;
}

#head li + li {
    opacity: 0;
}

JS

var current = 0,
    slides = document.querySelectorAll("#head ul li");

setInterval(function() {
    for (var i = 0; i < slides.length; i++) {
        slides[i].style.opacity = 0;
    }
    current = (current != slides.length -1) ? current + 1 : 0;
    slides[current].style.opacity = 1;
}, 2000);

Answer 1

我认为这是由ul标签的默认css引起的。

https://www.w3schools.com/cssref/css_default_values.asp

通过在*选择器中将填充设置为零，您可以将ul放在页面的中心。

希望这就是你要找的东西！

绝对定位li重叠文本

1 个答案: