Question

我想在html中创建一个反转有序，非连续年份而不是数字的列表。它应该是这样的：

2009 Item 7.
2007 Item 6.
2006 Item 5.
2004 Item 4.
2003 Item 3.
2002 Item 2.
2000 Item 1.

我的代码适用于反向订购号码列表：

ol {
    margin-left: 0;
    padding-left: 1em;
    text-indent: -1em;
}

<ol>
    <li value="5">Item 5.</li>
    <li value="4">Item 4.</li>
    <li value="3">Item 3.</li>
    <li value="2">Item 2.</li>
    <li value="1">Item 1.</li>
</ol>

这给了我：

5. Item 5.
4. Item 4.
3. Item 3.
2. Item 2.
1. Item 1.

如果我简单地添加一年：

<ol>
    <li value="2002">Item 5.</li>
</ol>

'2002'在项目区域内移动，而不是向左移动。有一个简单的方法吗？

Answer 1

史蒂夫，似乎definition list更适合您的需求。从技术上讲，尽管年份是一个数字，但它不能作为您的列表编号（从您不希望在一年之后的期间推断）。您可以将 dl 的样式设置为类似于 ol ，并且除了列表项之外，还可以更好地控制年份。

dt {width: 3em; clear: both;}
dd, dt {float: left;}

<dl>
    <dt>2007</dt> 
    <dd>Item 6</dd>
    <dt>2006</dt>
    <dd>Item 5</dd>
    <dt>2004</dt>
    <dd>Item 4</dd>
    <dt>2003</dt>
    <dd>Item 3</dd>
    <dt>2002</dt>
    <dd>Item 2</dd>
    <dt>2000</dt>
    <dd>Item 1</dd>
</dl>

Answer 2

在我看来，你正在将风格应用于错误的元素。如果你将css更改为：

li {
margin-left: 0;
padding-left: 1em;
text-indent: -1em; }

它可以立即解决您的问题。请注意，这可能是您正在寻找的结果，也可能不是，但我理解的是

Answer 3

在value上的有序列表<li>属性上，这是相当不言自明的。

<ol>
    <li value="2007">Item 1</li>
    <li value="2005">Item 2</li>
    <li value="2004">Item 3</li>
</ol>

我不确定数字移动的确切问题 - 我尝试过Firefox，Chrome和Opera，他们都玩过球。如果您在Internet Explorer中看到问题，请确保您拥有doctype，这样您就不会进入怪癖模式。

我确实在Chrome中看到了一个小问题，其中第一个数字在屏幕边缘被切断。但是，如果您遇到同样的事情，可以通过将left-padding（或边距）更改为默认的40px以上的任何内容来轻松解决此问题。

有趣的是，HTML 5定义的reversed属性更接近您想要的属性，但尚未得到很好的支持。另请注意，虽然HTML4中不推荐使用value属性，但HTML5中的并未弃用，因此请将其用于内容！

Answer 4

这对我有用

<ol type="1">
    <li value="2007">item 1</li>
    <li value="2005">item 2</li>
    <li value="2004">item 3</li>
</ol>

如何创建颠倒的有序年份列表？

4 个答案: