Fatal编程技术网
  • html/
  • Html 设置有序列表的样式，使数字左对齐并位于项目上方？

Html 设置有序列表的样式，使数字左对齐并位于项目上方？

html css

Html 设置有序列表的样式，使数字左对齐并位于项目上方？,html,css,html-lists,Html,Css,Html Lists,我认为这是一件容易的事情，但我还没有找到一个好的解决方案，也许我也使用了错误的搜索词 我想设置一个有序列表的样式，使项目显示为： 一, 项目一 二, 项目二 三, 项目三 有什么方法可以简单地用CSS来实现这一点吗 非常感谢 AFAIK，关于列表项相对于项目符号或数字或其他内容的位置。。。因此，直接在HTML、服务器端或通过Javascript在客户端生成数字可能是一个更好的主意 然而，下面的工作至少在Firefox中进行，但是在中间BR是相当丑陋的：-/< /P> <html>

我认为这是一件容易的事情，但我还没有找到一个好的解决方案，也许我也使用了错误的搜索词

我想设置一个有序列表的样式，使项目显示为：

一,

项目一

二,

项目二

三,

项目三

有什么方法可以简单地用CSS来实现这一点吗

非常感谢

AFAIK，关于列表项相对于项目符号或数字或其他内容的位置。。。因此，直接在HTML、服务器端或通过Javascript在客户端生成数字可能是一个更好的主意

然而，下面的工作至少在Firefox中进行，但是在中间BR是相当丑陋的：-/< /P> 

<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>
这样做的目的是强制列表项的内容位于另一行带有br的位置，然后在内容上应用一些负边距将其移动到您想要的位置。。。这当然不是一个好的解决方案。。。此外，我认为每个浏览器都可能以自己的方式生成列表索引，因此没有好的方法让它在所有浏览器上工作

您可以将该属性与伪元素和\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>
这在支持CSS 2.1的浏览器上应该可以正常工作。

您可以尝试以下方法：

<style>
    ol {
      list-style-position: inside;
      padding-left: 0;
    }
</style>

<ol>
    <li>&nbsp;<div>foobar</div></li>
    <li>&nbsp;<div>wah la</div></li>
</ol>
它可以在FF和Chrome上运行，但我当前的机器上没有IE可以尝试。

它一定要是一个有序列表吗

如果你是动态生成内容，那么你可以自己输出数字，然后按照你喜欢的方式格式化标记-而不是通过做一些“聪明”的事情来强迫浏览器，通过做一些“聪明”的事情来简化情况。

我知道这个问题真的很老，但我在搜索同一个答案时最终找到了它，而这些答案并不能完全满足我的需要。我还刚刚学会了在CSS中使用计数器这一非常酷的技术

您的CSS将如下所示：

ol {
   list-style: none; /* Remove default numbers */
   counter-reset: item;
}
ol li {
   counter-increment: item;
}
ol li:before {
   content: counter(item); /* Add the numbers as content in the before pseudo */
   /* Continue styling as needed, changing, fonts, position, etc. */
   display: block;
}
感谢所有令人难以置信的及时和有用的回复，我选择了这个解决方案，因为它允许列表项清除除预期内容以外的任何内容。它在Chrome/Firefox中非常适合我。唉，我还没有测试IE。我到时会回来报到的