I'm experiencing an issue with the alignment of my ordered list. My list is structured as follows:
<ol type="a">
<li><button style="display: inline-block">TEXT1</button></li>
<li><button style="display: inline-block">TEXT2</button></li>
<li><button style="display: inline-block">TEXT3</button></li>
<li><button style="display: inline-block">TEXT4</button></li>
</ol>
When the text is short, it aligns next to the order character like this:
However, when the text is longer, it jumps to the next line instead of aligning on the same line with the order like this:
Edit: It has been pointed out that I missed some attributes for my LI in order to reproduce the problem. Each LI element also has "list-style-position: inside" CSS, which seems to be the source of the issue.
Is there a solution to correct this so that the button will align next to the order instead of jumping to the next line?