如何创建一个倒序的年份列表？
如何创建一个倒序的年份列表？
提问于 2009-12-14 05:54:35
我想在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”是在项目的区域内移动，而不是放在左边。有什么简单的方法可以解决这个问题吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2009-12-14 10:59:06
史蒂夫，看起来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>Stack Overflow用户
发布于 2009-12-14 06:05:53
在我看来，您将样式应用到了错误的元素。如果将css更改为：
li {
margin-left: 0;
padding-left: 1em;
text-indent: -1em; }它可以立即修复您的问题。请注意，这可能是您想要的结果，也可能不是，但根据我的理解
Stack Overflow用户
发布于 2009-12-14 06:24:18
在有序列表中，<li>上的value属性，这非常不言自明。
<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的任何值来轻松解决此问题。
有趣的是，HTML5定义了一个更接近您需要的reversed属性，但目前还没有得到很好的支持。还要注意，虽然value属性在HTML4中已被弃用，但在HTML5中并未被弃用，因此请尽情使用它！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1897909
复制相关文章
相似问题
腾讯云开发者
