我在列表中的列表中有一个列表。 设置如下：
<ol>
<li>
<ol>
<li>
---> Here goes content
</li>
<ol>
</li>
</ol>
我想实现一个外观，其中每个列表元素都在同一位置。他们不应该像标准那样转移。 ->一切都应与左侧保持相同的距离（但是对于左边距来说这不是问题。已经设置为“ 0”）
图片也许更清晰。这是我得到的： https://www.dropbox.com/s/jb44nscm3ofn3ln/list-in-list-problem.png?dl=0
这就是我想要得到的： https://www.dropbox.com/s/jo3foli7muzvgqj/list-in-list-solution.png?dl=0
到目前为止，这是HTML代码：
<!DOCTYPE html>
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<link rel="stylesheet" href="style.css" type='text/css'>
<!-- <script type="text/javascript" src="action.js"></script> -->
<script type="text/javascript" src="visibility.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="test-nojquery.js"></script>
</head>
<body>
<div class="header">
<img src="images/wave_testimage.jpg" alt="demo_image" />
</div>
<div class="content">
<h1>Linkliste zu den im Buch verwendeten Musikbeispielen</h1>
<p>In dieser Liste sind zu jedem im Buch verwendeten Musikbeispiel der Kapitel 3–6 ein oder mehrere YouTube-Links angegeben, damit Sie sich schnell orientieren können.</p>
<p>Eine Garantie für die dauerhafte Verfügbarkeit der Verlinkungen kann nicht übernommen werden. Sollte einer der Links nicht mehr aktuell sein, empfiehlt es sich, mithilfe der Stichwörter von Titel und Komponist nach Alternativen zu suchen.</p>
<ol>
<li class="list-h1" id="showhide-button">Rezeption in Verbindung mit Produktion
<ol>
<div id=data><li class="list-h2">Eine Parakomposition erfinden
<p class="inside-parakomp-title"><authorname>Emil Waldteufel</authorname>: <songname>Die Schlittschuhläufer</songname><book-page>20</book-page></p>
<p><description>Das <interpret>Johann-Strauss-Orchester Wiebaden</interpret> unter der Leitung von Herbert Siebert hat eine Fassung von knapp 5 Minuten eingespielt, die wegen dieser Kürze für die Grundschule geeignet ist.</description></p>
<span class="inside-parakomp-box">
https://youtu.be/bvjHWR8K04o<br><link-checked>2019-03-04</link-checked>
</span>
</li></div>
<div id=data><li class="list-h2">Eine Parakomposition erfinden</li></div>
<div id=data><li class="list-h2">Eine Parakomposition erfinden</li></div></ol></li>
<li class="list-h1">Rezeption in Verbindung mit Produktion
<ol>
<li class="list-h2">Eine Parakomposition erfinden</li>
<li class="list-h2">Eine Parakomposition erfinden</li>
<li class="list-h2">Eine Parakomposition erfinden</li></ol></li>
<li class="list-h1">Rezeption in Verbindung mit Produktion
<ol>
<li class="list-h2">Eine Parakomposition erfinden</li>
<li class="list-h2">Eine Parakomposition erfinden</li>
<li class="list-h2">Eine Parakomposition erfinden</li></ol></li>
</ol>
</div>
</body>
</html>
这是与列表项有关的CSS：
ol {
counter-reset: item;
}
li {
display: block;
display: inline-block;
}
li:before {
content: counters(item, ".") " ";
counter-increment: item;
}
我没有收到错误消息，只是没有得到我想要的。
答案 0 :(得分：1)
您需要覆盖<ol>默认样式。将paading:0;设置为<ol>
ol {
counter-reset: item;
padding: 0;
}
li {
display: block;
display: inline-block;
}
li:before {
content: counters(item, ".") " ";
counter-increment: item;
}<!DOCTYPE html>
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<link rel="stylesheet" href="style.css" type='text/css'>
<!-- <script type="text/javascript" src="action.js"></script> -->
<script type="text/javascript" src="visibility.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="test-nojquery.js"></script>
</head>
<body>
<div class="header">
<img src="images/wave_testimage.jpg" alt="demo_image" />
</div>
<div class="content">
<h1>Linkliste zu den im Buch verwendeten Musikbeispielen</h1>
<p>In dieser Liste sind zu jedem im Buch verwendeten Musikbeispiel der Kapitel 3–6 ein oder mehrere YouTube-Links angegeben, damit Sie sich schnell orientieren können.</p>
<p>Eine Garantie für die dauerhafte Verfügbarkeit der Verlinkungen kann nicht übernommen werden. Sollte einer der Links nicht mehr aktuell sein, empfiehlt es sich, mithilfe der Stichwörter von Titel und Komponist nach Alternativen zu suchen.</p>
<ol>
<li class="list-h1" id="showhide-button">Rezeption in Verbindung mit Produktion
<ol>
<div id=data>
<li class="list-h2">Eine Parakomposition erfinden
<p class="inside-parakomp-title">
<authorname>Emil Waldteufel</authorname>:
<songname>Die Schlittschuhläufer</songname>
<book-page>20</book-page>
</p>
<p>
<description>Das
<interpret>Johann-Strauss-Orchester Wiebaden</interpret> unter der Leitung von Herbert Siebert hat eine Fassung von knapp 5 Minuten eingespielt, die wegen dieser Kürze für die Grundschule geeignet ist.</description>
</p>
<span class="inside-parakomp-box">
https://youtu.be/bvjHWR8K04o<br><link-checked>2019-03-04</link-checked>
</span>
</li>
</div>
<div id=data>
<li class="list-h2">Eine Parakomposition erfinden</li>
</div>
<div id=data>
<li class="list-h2">Eine Parakomposition erfinden</li>
</div>
</ol>
</li>
<li class="list-h1">Rezeption in Verbindung mit Produktion
<ol>
<li class="list-h2">Eine Parakomposition erfinden</li>
<li class="list-h2">Eine Parakomposition erfinden</li>
<li class="list-h2">Eine Parakomposition erfinden</li>
</ol>
</li>
<li class="list-h1">Rezeption in Verbindung mit Produktion
<ol>
<li class="list-h2">Eine Parakomposition erfinden</li>
<li class="list-h2">Eine Parakomposition erfinden</li>
<li class="list-h2">Eine Parakomposition erfinden</li>
</ol>
</li>
</ol>
</div>
</body>
</html>