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

问题描述 投票：4回答：4

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

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

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

* {
  margin: 0px;
  padding: 0px
}
<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>
html css
4个回答
2
投票

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

以下是您可能想要告诉学生的内容：

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

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

从该文档可以看出，鼓励浏览器为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;
}


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

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

div {
  margin: 0;
  padding: 0;
}
<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>
4
投票

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

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>
0
投票

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

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

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

.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;
}
<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>
0
投票

*适用于所有类和ID。你把它放在包装器和div1之后，所以它覆盖了那些边缘和填充并将它们设置为0。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.