使用 <ul> 作为有序列表

Question

我需要将第三方开发的 Web 应用程序与我的网站集成。

显示课程类别列表和课程列表。开发人员不允许我访问应用程序。我被要求将类别显示为图像块，将课程显示为编号列表。

我已经使用 firebug 检查了列表。我找到了 id 和 class，它们在 <ul> 无序列表中。

我使用了以下类别：

ul#category-list li:nth-child(1){
  background-image: url("images/adm1.jpg");
  width: 560px;
  height: 300px;
}
ul#category-list li:nth-child(2){
  background-image: url("images/adm2.jpg");
  width: 560px;
  height: 300px;
}
ul#category-list li:nth-child(3){
  background-image: url("images/adm2.jpg");
  width: 560px;
  height: 300px;
}
ul#category-list li:nth-child(4){
  background-image: url("images/adm1.jpg");
  width: 560px;
  height: 300px;
}

课程。在<ul>；无法更改为 <ol>（这将解决问题）。有什么方法可以使用 CSS?

来实现吗？

Answer 1

是的，只需将 ul 的 list-style-type 设置为 decimal，它就会像 ol 一样自动工作。

显示为有序列表，我假设你的意思是数字应该是 1、2、3。如果你希望它是 i、ii、iii，那么使用值as lower-roman 而不是 decimal 或 if as I, II, III 然后将其设置为 upper-roman.

ul#course-list {
  list-style-type: decimal;
}
ul#course-list-2 {
  list-style-type: lower-roman;
}
ul#course-list-3 {
  list-style-type: upper-roman;
}

<ul id='course-list'>
  <li>Course 1</li>
  <li>Course 2</li>
  <li>Course 3</li>
  <li>Course 4</li>
  <li>Course 5</li>
</ul>
<ul id='course-list-2'>
  <li>Course 1</li>
  <li>Course 2</li>
  <li>Course 3</li>
  <li>Course 4</li>
  <li>Course 5</li>
</ul>
<ul id='course-list-3'>
  <li>Course 1</li>
  <li>Course 2</li>
  <li>Course 3</li>
  <li>Course 4</li>
  <li>Course 5</li>
</ul>

注意：虽然以上是一个解决方案，但我仍然建议您与开发人员联系并要求他们使用语义正确的标签。

使用 <ul> 作为有序列表

Use <ul> as ordered list

html

css

html-lists