如何使音頻元素在串列項中對齊？-有解無憂

默認情況下，音頻元素在串列項中不居中顯示。我怎樣才能在 CSS 中解決這個問題？

<ol>
  <li>
    [::1]:37588 - Created: 451.767796ms ago
    <audio controls>
          <source src="https://local-audio-test.s3.ap-southeast-1.amazonaws.com/[::1]:37588/2022-01-02/test.m4a" type="audio/x-m4a" />
        </audio>
  </li>
  <li>
    [::1]:37562 - Created: 11h21m31.451801108s ago
    <audio controls>
          <source src="https://local-audio-test.s3.ap-southeast-1.amazonaws.com/[::1]:37562/2022-01-01/audio.m4a" type="audio/x-m4a" />
        </audio>
  </li>


</ol>

uj5u.com熱心網友回復：

您可以使用flex-box并對齊您的專案并對齊內容。

如果這不是您要查找的內容，請告訴我，我可以調整答案或將其洗掉。

li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .5em;
}

<ol>
  <li>
    [::1]:37588 - Created: 451.767796ms ago
    <audio controls>
          <source src="https://local-audio-test.s3.ap-southeast-1.amazonaws.com/[::1]:37588/2022-01-02/test.m4a" type="audio/x-m4a" />
        </audio>
  </li>
  <li>
    [::1]:37562 - Created: 11h21m31.451801108s ago
    <audio controls>
          <source src="https://local-audio-test.s3.ap-southeast-1.amazonaws.com/[::1]:37562/2022-01-01/audio.m4a" type="audio/x-m4a" />
        </audio>
  </li>


</ol>

uj5u.com熱心網友回復：

   li {
        display: flex;
      }
      span {
        margin-top: 30px;
        margin-right: 20px;
      }
      audio {
        margin-top: 10px;
      }

   <ol>
      <li>
        <span>[::1]:37588 - Created: 451.767796ms ago</span>
        <audio controls>
              <source src="https://local-audio-test.s3.ap-southeast-1.amazonaws.com/[::1]:37588/2022-01-02/test.m4a" type="audio/x-m4a" />
            </audio>
      </li>
      <li>
        <span>[::1]:37562 - Created: 11h21m31.451801108s ago</span>
        <audio controls>
              <source src="https://local-audio-test.s3.ap-southeast-1.amazonaws.com/[::1]:37562/2022-01-01/audio.m4a" type="audio/x-m4a" />
            </audio>
      </li>
    </ol>

試試這個

li {
    display: flex;
}

span {
     margin-top: 20px;
     margin-right: 20px;
}

<ol>
      <li>
        <span>[::1]:37588 - Created: 451.767796ms ago</span>
        <audio controls>
              <source src="https://local-audio-test.s3.ap-southeast-1.amazonaws.com/[::1]:37588/2022-01-02/test.m4a" type="audio/x-m4a" />
            </audio>
      </li>
      <li>
        <span>[::1]:37562 - Created: 11h21m31.451801108s ago</span>
        <audio controls>
              <source src="https://local-audio-test.s3.ap-southeast-1.amazonaws.com/[::1]:37562/2022-01-01/audio.m4a" type="audio/x-m4a" />
            </audio>
      </li>
    
    
    </ol>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401217.html

標籤：css

上一篇：需要在我的網頁上并排對齊的搜索框

下一篇：通過css垂直對齊flexbox