All geek questions in one place

* The css rule changes the way my lists appear in a div

I am a teacher teaching basic HTML and CSS in high school. Last week we discussed and practiced lists, and this week we are on the topic of div classes. I am trying to put a list in a div, using *to eliminate unwanted space in and around the div. By doing this, lists no longer remain in the div. What do I need to do to get list numbers inside a 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>
Run codeHide result
+4
source share
4 answers

I am trying to put a list in a div, using *to eliminate unwanted space in and around the div. By doing this, lists no longer remain in the div. What do I need to do to get list numbers inside a div?

:

, * ( ), , .

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
}

( ).

:

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>
Hide result
+2

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>
Hide result

: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>
Hide result
+4

j08691, :

padding-left: 2.5em ul ol

, HTML, :). 2- 1- .

.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>
Hide result
0

* applies to all classes and identifiers. Youre putting it after the wrapper and div1, so it redefines the margin and padding in them and sets them to 0.

0
source

Source: https://habr.com/ru/post/1694249/

More articles:


All Articles