html - 文本/标题中的内联列表

Question

我想在标题中显示一个列表(动画)。我希望列表与文本的其余部分放在一起。我将 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>

Answer 1

问题是你的 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>

希望这对您有所帮助。