我想在标题中显示一个列表(动画)。我希望列表与文本的其余部分放在一起。我将 UL 设置为 display:inline-block 期望 li 位于基线上,但它没有:
* {margin:0;padding:0}
.cycle {
display:inline-block;
position: relative;
}
li {
animation: word-cycle 2.5s linear infinite 0s;
position: absolute;
top:0;
visibility: hidden;
}
.cycle li:nth-child(2) {
animation-delay: 0.5s;
}
.cycle li:nth-child(3) {
animation-delay: 1s;
}
.cycle li:nth-child(4) {
animation-delay: 1.5s;
}
.cycle li:nth-child(5) {
animation-delay: 2s;
}
@keyframes word-cycle {
20%,
100% {
visibility: hidden;
}
0% {
visibility: visible;
}
}
<h1>This is some text with a list:
<ul class="cycle">
<li>One</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>fice</li>
</ul>
</h1>
最佳答案
问题是你的 li
定位 absolute
删除它,它将内联。
* {margin:0;padding:0}
h1{
display: flex;
}
.cycle {
display:inline-block;
position: relative;
list-style-type: none;
}
li {
animation: word-cycle 2.5s linear infinite 0s;
position: absolute;
top:0;
visibility: hidden;
margin-left: 10px;
}
.cycle li:nth-child(2) {
animation-delay: 0.5s;
}
.cycle li:nth-child(3) {
animation-delay: 1s;
}
.cycle li:nth-child(4) {
animation-delay: 1.5s;
}
.cycle li:nth-child(5) {
animation-delay: 2s;
}
@keyframes word-cycle {
20%,
100% {
visibility: hidden;
}
0% {
visibility: visible;
}
}
<h1>This is some text with a list:
<ul class="cycle">
<li>One</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>fice</li>
</ul>
</h1>
希望这对您有所帮助。
关于html - 文本/标题中的内联列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49232843/