* css规则正在改变我的列表在div中的显示方式

Question

我是一名老师，在高中教授基本的HTML和CSS。上周我们讨论并练习了列表，本周我们讨论了div类的主题。我试图将列表放入div中，同时使用*来消除div内部和周围的不需要的空间。通过这样做，列表不再停留在div中。如何获取div中的列表编号？

＆＃13;

＆＃13;

.wrapper {
  width: 85%;
  margin-right: auto;
  margin-left: auto;
}

.div1 {
  background-color: green;
  padding: 10px
}

* {
  margin: 0px;
  padding: 0px
}

＆＃13;

<div class="wrapper">
  <div class="div1">
    <h2>Famous Dishes</h2>
    <ul style="list-style-type:square">
      <li>Baden-Württemberg</li>
      <ol type="a">
        <li>Maultaschen</li>
        <li>Brenntar</li>
        <li>Sauerbraten</li>
        <li>Sauerkraut</li>
        <li>Spätzle, Knöpfle</li>
      </ol>
      <li>Bavaria</li>
      <ol type="a">
        <li>Weißwürste</li>
        <li>Weizenbier/Weißbier</li>
        <li>Helles Bier</li>
        <li>Radler</li>
      </ol>
      <li> Berlin</li>
      <ol type="a">
        <li>Buletten</li>
        <li>Currywurst</li>
        <li>Eierkuchen</li>
        <li>Eisbein</li>
      </ol>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将外部列表的list-style-position属性更改为内部：

ul, ol {
  list-style-position: inside;
}

.wrapper {
  width: 85%;
  margin-right: auto;
  margin-left: auto;
}

.div1 {
  background-color: green;
  padding: 10px
}

* {
  margin: 0px;
  padding: 0px
}

ul,
ol {
  list-style-position: inside;
}

<div class="wrapper">
  <div class="div1">
    <h2>Famous Dishes</h2>
    <ul style="list-style-type:square">
      <li>Baden-Württemberg
        <ol type="a">
          <li>Maultaschen</li>
          <li>Brenntar</li>
          <li>Sauerbraten</li>
          <li>Sauerkraut</li>
          <li>Spätzle, Knöpfle</li>
        </ol>
      </li>
      <li>Bavaria
        <ol type="a">
          <li>Weißwürste</li>
          <li>Weizenbier/Weißbier</li>
          <li>Helles Bier</li>
          <li>Radler</li>
        </ol>
      </li>
      <li> Berlin
        <ol type="a">
          <li>Buletten</li>
          <li>Currywurst</li>
          <li>Eierkuchen</li>
          <li>Eisbein</li>
        </ol>
      </li>
    </ul>
  </div>
</div>

或者，当您使用:not

时，您可以使用*来定位列表的边距

*:not(ul):not(ol) 

.wrapper {
  width: 85%;
  margin-right: auto;
  margin-left: auto;
}

.div1 {
  background-color: green;
  padding: 10px
}

*:not(ul):not(ol) {
  margin: 0px;
  padding: 0px
}

<div class="wrapper">
  <div class="div1">
    <h2>Famous Dishes</h2>
    <ul style="list-style-type:square">
      <li>Baden-Württemberg
        <ol type="a">
          <li>Maultaschen</li>
          <li>Brenntar</li>
          <li>Sauerbraten</li>
          <li>Sauerkraut</li>
          <li>Spätzle, Knöpfle</li>
        </ol>
      </li>
      <li>Bavaria
        <ol type="a">
          <li>Weißwürste</li>
          <li>Weizenbier/Weißbier</li>
          <li>Helles Bier</li>
          <li>Radler</li>
        </ol>
      </li>
      <li> Berlin
        <ol type="a">
          <li>Buletten</li>
          <li>Currywurst</li>
          <li>Eierkuchen</li>
          <li>Eisbein</li>
        </ol>
      </li>
    </ul>
  </div>
</div>

Answer 2

  

我尝试将列表放入div中，同时使用*来消除div内部和周围的不需要的空间。通过这样做，列表不再停留在div中。如何获取div中的列表编号？

您可能想告诉您的学生：

问题在于您设置的*（universal selector）规则正在重置默认浏览器样式。

大多数浏览器都有一组用于呈现HTML文档的默认样式。以下是W3C推荐的默认样式列表：

• https://www.w3.org/TR/CSS22/sample.html

从该文档可以看出，我们鼓励浏览器为ul和ol元素创建顶部和底部边距。

blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }

还鼓励他们设置这些默认值：

ol, ul, dir,
menu, dd        { margin-left: 40px }

ol              { list-style-type: decimal }

ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }

请注意，某些浏览器可能会使用padding而不是margin。

因此，当您设置此规则时......

* {
  margin: 0px;
  padding: 0px
}

它会覆盖浏览器样式（in accordance with the cascade）。

但你写道：

  

我试图将列表放入div中，同时使用*来消除div内部和周围不需要的空间。

那为什么不专注于div呢？你为什么要定位所有元素？

也许这就是你想要的：

div {
  margin: 0;
  padding: 0;
}

＆＃13;

＆＃13;

.wrapper {
  width: 85%;
  margin-right: auto;
  margin-left: auto;
}

.div1 {
  background-color: green;
  padding: 10px;
}

div {
  margin: 0;
  padding: 0;
}

＆＃13;

<div class="wrapper">
  <div class="div1">
    <h2>Famous Dishes</h2>
    <ul style="list-style-type:square">
      <li>Baden-Württemberg</li>
      <ol type="a">
        <li>Maultaschen</li>
        <li>Brenntar</li>
        <li>Sauerbraten</li>
        <li>Sauerkraut</li>
        <li>Spätzle, Knöpfle</li>
      </ol>
      <li>Bavaria</li>
      <ol type="a">
        <li>Weißwürste</li>
        <li>Weizenbier/Weißbier</li>
        <li>Helles Bier</li>
        <li>Radler</li>
      </ol>
      <li> Berlin</li>
      <ol type="a">
        <li>Buletten</li>
        <li>Currywurst</li>
        <li>Eierkuchen</li>
        <li>Eisbein</li>
      </ol>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

作为j08691 answer的替代方法，您可以覆盖覆盖的填充：

将padding-left: 2.5em添加到ul和ol

请注意，我更正了您的HTML，因此它有效:)。第二级列表必须放在里面第一级列表项。

＆＃13;

＆＃13;

.wrapper {
  width: 85%;
  margin-right: auto;
  margin-left: auto;
}

.div1 {
  background-color: green;
  padding: 10px
}

* {
  margin: 0px;
  padding: 0px
}

ul,
ol {
  padding-left: 2.5em;
}

＆＃13;

<div class="wrapper">
  <div class="div1">
    <h2>Famous Dishes</h2>
    <ul style="list-style-type:square">
      <li>Baden-Württemberg
        <ol type="a">
          <li>Maultaschen</li>
          <li>Brenntar</li>
          <li>Sauerbraten</li>
          <li>Sauerkraut</li>
          <li>Spätzle, Knöpfle</li>
        </ol>
      </li>
      <li>Bavaria
        <ol type="a">
          <li>Weißwürste</li>
          <li>Weizenbier/Weißbier</li>
          <li>Helles Bier</li>
          <li>Radler</li>
        </ol>
      </li>
      <li> Berlin
        <ol type="a">
          <li>Buletten</li>
          <li>Currywurst</li>
          <li>Eierkuchen</li>
          <li>Eisbein</li>
        </ol>
      </li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

*适用于所有课程＆amp;标识。你把它放在包装器和div1之后，所以它覆盖了那些边缘和填充并将它们设置为0.