Question

我有一个像

这样的有序列表

内容1
内容2
content3

对于公路旅行路线，我希望它是：

第1天：content1

第2天：content2

第3天：content3

我当然可以把它写成文字，但我更喜欢把它作为一个列表。这可能吗？

Answer 1

＆＃13;

ol {
  position:relative;
  padding-left: 50px;
}
ol li:before {
  content:"Day";
  position:absolute;
  left:0;
}

＆＃13;

<ol>
  <li>content1</li>
  <li>content2</li>
  <li>content3</li>
</ol>

＆＃13;

检查这个

Answer 2

你可以无需定位列表项 - 重置列表并让pseudo元素完成剩下的工作：

使用list-style-type:none和padding:0
现在使用增量counter来获取所需的列表编号

见下面的演示：

＆＃13;

ul {
  list-style-type: none;
  padding: 0;
  counter-reset: list;
}
ul li:before {
  content: 'Day ' counter(list) ' : ';
  counter-increment: list;
}

＆＃13;

<ul>
  <li>content1</li>
  <li>content2</li>
  <li>content3</li>
</ul>

＆＃13;

Answer 3

var routes = {}

//add to a list
routes.Day1 = 'Going Here!';
routes.Day2 = 'Resting';
//and keep adding so on

//to print/list the routes
console.log(routes);

//give it the tag and data
function add2html(tag, data) {
   var element = document.getElementById(tag);
   element.replaceWith(data);
};

// to add to day1
add2html('day1', routes.Day1)

不确定您使用的是什么，因此默认为javascript。然后在html。

<!-- using <li></li> will give you numbers before -->
<ul id="day1"></ul>

Answer 4

您可以通过将其定义为无序列表来实现此目的。然后在css中将ul list-style定义为none。然后在每个li之前使用css li：类型为nth-of（1）的选择器，内容为Day 1：，li：nth-of-type（2）选择器，包含内容第2天：并正确定位。

我可以在列表编号中添加文字吗？

4 个答案: