Question

我正在尝试在HTML中创建一个有序的水平列表，但我无法使用单独的CSS文件或编辑头标记。这是因为我的内容是内容管理系统的一部分。何时，我在寻找如何在线创建水平列表，所有解决方案似乎都有外部CSS文件或样式块。

以下是我的工作方式，它提供了一个水平列表，但没有编号/枚举项目：

<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>

你能帮忙吗？

编辑以回应评论：当我要求没有CSS时，我没有意识到与HTML标签内联的样式标记被计为CSS。我的改述问题是“如何使用在线内联样式标签执行此操作”。

Answer 1

这是一种古怪的事情。您需要使用float来使小数表样式起作用。

<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>

显然只是根据自己的喜好调整风格。

这是一个快速的小提琴：https://jsfiddle.net/c5dnmrdr/

Answer 2

你可以这样做，使用float并在元素之间给出间距：

＆＃13;

<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>

＆＃13;

Answer 3

没有基于CSS的解决方案

那将是使用默认情况下具有display:inline或display:inline-block的元素，您无法在没有任何CSS的情况下对元素结构进行更改。

＆＃13;

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

＆＃13;

如果您的目标是保留编号，可以自己添加。除此之外，没有CSS是不可能实现的。

我是否可以仅使用内嵌样式

3 个答案: