时间戳

首页 > 解决方案 > 样式 HTML-

  • 列入名单
      列在
        list 使每个列表元素与屏幕左侧具有相同的差异（不是 margin-left！）

    • html - 样式 HTML-
  • 列入名单
      列在
        list 使每个列表元素与屏幕左侧具有相同的差异（不是 margin-left！）

    • 问题描述

    我有一个列表中的列表中的列表中的列表。它是这样设置的：

    <ol>
<li>
<ol>
<li>

---> Here goes content

</li>
<ol>
</li>
</ol>

    我想看看，每个列表元素都在同一个位置。他们不应该像标准一样被转移。-> 一切都应该与左边的距离相同（但这不是 margin-left 的问题。这已经设置为“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;
}

    我没有收到错误消息，只是没有得到我想要的。

    标签： htmlcss

    解决方案

    您需要覆盖<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>

    推荐阅读