How can I make the audio element align in a list item?-CodePudding

By default the audio element appears uncentered in a list item. How can I fix that in 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>

CodePudding user response：

You can use flex-box and align your items and justify the content.

If this is not what you're looking for, let me know and I can adjust my answer or remove it.

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>

CodePudding user response：

   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>

Try This

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>