Question

我在伪代码：before中添加了一个具有基本样式的计数器，但是在溢出时，如何根据<li>的第一行来固定边距和填充

运行代码并检查输出。

ol {
  list-style: none;
  counter-reset: item;
  margin: 0px;
  padding: 0px;
}
li {
  counter-increment: item;
}

li:before {
  content: counter(item);
  border-right: 1px solid #ddd;
  padding: 0 .5em;
  margin-right: .5em;
  color: #888;
  text-align: center;
  display: inline-block;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS</title>
</head>

<body>
<ol>
<li>Web pages are not the only place where JavaScript is used. Many desktop and server programs use JavaScript. Node.js is the best known. Some databases, like MongoDB and CouchDB, also use JavaScript as their programming language.</li>
<li>Web pages are not the only place where JavaScript is used. Many desktop and server programs use JavaScript. Node.js is the best known. Some databases, like MongoDB and CouchDB, also use JavaScript as their programming language.</li>
<li>Web pages are not the only place where JavaScript is used. Many desktop and server programs use JavaScript. Node.js is the best known. Some databases, like MongoDB and CouchDB, also use JavaScript as their programming language.</li>
</ol>
</body>
</html>

CSS li：在溢出之前不遵循边距和填充

0 个答案: