设置有序列表的样式，使数字左对齐并显示在项目上方？
[英]Style an ordered list so the number appears left-aligned and above the item?
问题描述
I thought this would be an easy thing, but I haven't found a good solution (maybe I'm also using the wrong search terms).
我认为这将是一件容易的事情，但我还没有找到一个好的解决方案（也许我也使用了错误的搜索词）。
I would like to style an ordered list so the items appear so:我想设置一个有序列表的样式，以便项目显示如下：
1
Item one
2
Item two
3
Item three
Is there any way to do this simply with CSS?有没有办法简单地用 CSS 做到这一点？
Many thanks in advance!提前谢谢了！
5 个解决方案
解决方案1
3 2010-10-18 08:37:14
You can try along the line of:您可以尝试以下方法：
<style>
ol {
list-style-position: inside;
padding-left: 0;
}
</style>
<ol>
<li> <div>foobar</div></li>
<li> <div>wah la</div></li>
</ol>
It works on FF and Chrome, but I don't have IE on my current machine to try.它适用于 FF 和 Chrome，但我当前的机器上没有 IE 可以尝试。
解决方案2
2 2010-10-18 08:30:36
AFAIK, CSS does not allow you to have a lot of control regarding the position of the list-item relative to the "bullet" (or number or whatever)... So it might be a better idea to generate the numbers directly in the HTML , on server-side, or on client-side via Javascript... AFAIK， CSS不允许您对列表项相对于“项目符号”（或数字或其他）的位置进行大量控制......所以直接在HTML ，在服务器端，或通过 Javascript 在客户端...
Nevertheless , the following works (at least in Firefox), but is rather ugly (with that br in the middle :-/ )尽管如此，以下工作（至少在 Firefox 中），但相当丑陋（中间有那个br :-/ ）
<html>
<head>
<style type="text/css">
li > p{
margin-left:-30px;
margin-top:-10px;
}
</style>
</head>
<body>
<ol>
<li><br/><p>item 1</p></li>
<li><br/><p>item 2</p></li>
</ol>
</body>
</html>
The idea is to force the content of the list-item to be on another line with a br , and then, on the content, apply some negative margins to move it where you want to... This is certainly not a nice solution ... in addition, I think that each browser may generate the "list-index" in its way, so there would be no nice way to have it work on all browsers ...这个想法是用br强制列表项的内容位于另一行，然后在内容上应用一些负边距将其移动到您想要的位置......这当然不是一个好的解决方案。 ..此外，我认为每个浏览器都可能以自己的方式生成“列表索引”，所以没有什么好的方法可以让它在所有浏览器上运行......
解决方案3
2 已采纳 2010-10-18 08:33:08
You can use the content property with the :before pseudo-element and the \a newline escape:您可以将content属性与:before伪元素和\a换行符转义一起使用：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>OL Test</title>
<style type="text/css">
li:before {
content: "\a";
white-space: pre;
}
</style>
</head>
<body>
<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ol>
</body>
</html>
That should work fine on browsers that support CSS 2.1.这在支持 CSS 2.1 的浏览器上应该可以正常工作。
解决方案4
1 2015-09-08 15:37:14
I know this question is really old, but I ended up finding it when searching for the same answer, and these answers provided didn't quite do what I needed it to do.我知道这个问题真的很老，但我最终在搜索相同的答案时找到了它，并且提供的这些答案并没有完全满足我的需要。 I had also just learned this really cool technique using the "counter" in CSS.我也刚刚学会了使用 CSS 中的“计数器”这个非常酷的技术。
ol { /* Remove default numbers */ list-style: none; counter-reset: item; } ol li { /* Increment the counter for this element */ counter-increment: item; /* Style the vertical spacing as needed */ display: block; margin: 1em 0; } ol li:before { /* Add the numbers as content in the before pseudo */ content: counter(item); /* Continue styling as needed, changing, fonts, position, etc. */ display: block; margin-bottom: 1em; }
<ol> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ol>
解决方案5
0 2010-10-18 09:16:27
Does it absolutely have to be an ordered list?它绝对必须是有序列表吗？
If you are dynamicaly generating the content, then you could always output the numbers yourself, and then format the markup however you like - rather than trying to coerce the browser by doing something 'clever', simplify the situation by doing someting 'smart'如果您正在动态生成内容，那么您始终可以自己输出数字，然后根据您的喜好格式化标记 - 而不是试图通过做一些“聪明”的事情来强制浏览器，而是通过做一些“聪明”来简化情况
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.