Question

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

显示课程类别和课程列表的列表。开发人员没有授予我访问应用程序的权限。我被要求将类别显示为图像块，将课程显示为编号列表。

我使用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

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

通过显示为有序列表，我假设你的意思是数字应该是1,2,3。如果你想要它是i，ii，iii然后使用值为{{1} }而不是lower-roman或者如果我，II，III然后将其设置为decimal。

＆＃13;

upper-roman

＆＃13;

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;
}

＆＃13;

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

使用<ul>作为有序列表

1 个答案: