文本/标题内的内联列表

Question

我想在标题中显示一个列表（动画）。我希望列表与文本的其余部分一致。我将UL设置为显示：内联块期望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>

希望得到这个帮助。

Answer 2

试试这个

＆＃13;

＆＃13;

* {margin:0;padding:0}

h1{ 
    display: inline;
    position: relative;

}
.cycle {
    display: inline-block;
    position: absolute;
    right: -40px;
}

 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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;