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>