Can I create a horizontal list in HTML using only inline style

Question

I am trying to create an ordered horizontal list in HTML, but I am not able to use a separate CSS file, or edit the head tag. This is because my content is part of a content management system. When, I look for how to create horizontal lists online, all solutions seem to have external CSS file, or style block in the head.

Here is what I worked my way towards, which gives a horizontal list, but doesn't number/enumerate the items:

<ol style="list-style: none" type="a">
    <li style="padding: 10px; display: inline">Eggs</li>
    <li style="padding: 10px; display: inline">Milk</li>
    <li style="padding: 10px; display: inline">Cheese</li>
</ol>

Can you help?

Edit in response to the comments: When I asked for no-CSS, I didn't realise that the style tag inline with the HTML tag counted as CSS. My rephrased question would be "How do I do this with online inline style tags".

Answer 1

This is a kind of quirky thing. You need to use float to get the decimal list style to work.

<ol>
    <li style="float:left;">Eggs</li>
    <li style="margin-left: 30px; float:left;">Milk</li>
    <li style="margin-left: 30px; float:left;">Cheese</li>
    <div style="clear:both"></div>
</ol>

Obviously just adjust the style to your liking.

Here's a quick fiddle: https://jsfiddle.net/c5dnmrdr/

Answer 2

You can do it this way, use float and give spacing between elements:

 <ol style="display:inline-block"> <li style="float:left; margin-right: 10px; ">Eggs</li> <li style="float:left; margin-right: 10px; margin-left: 20px; padding-left: 2px">Milk</li> <li style="float:left; margin-left: 20px; padding-left:2px">Cheese</li> </ol> 

Answer 3

None CSS based solution

That Would be to use elements that by default has display:inline or display:inline-block , You can't make changes to an element structure without any CSS.

 <span>Eggs</span> <span>Milk</span> <span>Cheese</span> 

If your goal is to keep the numbering then, maybe add them yourself. other than that it's impossible to achieve with no CSS.