html - 使用 作为有序列表

Question

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

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

我已经使用 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;
}

类(class)。它在 <ul> ;没有办法改成<ol> (这将解决问题)。有什么方法可以使用 CSS 实现这一点？

Answer 1

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

通过显示为有序列表，我假设您的意思是数字应该是 1、2、3。如果您希望它是 i、ii、iii，则使用 lower 的值-roman 而不是 decimal 或者如果作为 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>

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