DEVHIDE
Login Or Sign up

How to Bold both number and list on HTML (OL LI) without getting the sub list getting affected?

81 Views Asked by At

I am trying to make a list like this picture, but I think I can't get it right.

enter image description here

I was able to bold only the list but I couldn't bold the number generated by using , also I want to know how to get the exact result on like on the picture.

Here is my code :

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Pertemuan 03</title>
  <style>
    body {
      font-family: sans-serif;
    }
    
    h4 {
      text-decoration: underline;
    }
    
    .italic {
      font-style: italic;
    }
    
    ul li,
    ol li {
      text-indent: 20px;
      padding-bottom: 3px;
    }
  </style>
</head>

<body>
  <h4>Menu:</h4>
  <ol>
    <li>
      <b>Makanan:</b>
      <ol type="A">
        <li>Nasi Kuning</li>
        <li>Nasi Uduk</li>
        <li>Nasi Goreng</li>
      </ol>
    </li>
    <li>
      <b>Lauk:</b>
      <ul type="disc">
        <li>Tahu Goreng</li>
        <li>Tempe Goreng</li>
        <li>Orek Tempe</li>
        <li>Cah Kangkung</li>
      </ul>
    </li>
    <li>
      <b>Sayur:</b>
      <ol type="a">
        <li>Sayur Asem</li>
        <li>Soto Ayam</li>
        <li>Sop Iga Sapi</li>
      </ol>
    </li>
    <li>
      <b>Minuman:</b>
      <ol type="A">
        <li>
          <i>Minuman Dingin:</i>
          <ol type="i">
            <li>Es Teh Manis</li>
            <li>Es Jeruk</li>
            <li>Es Campur</li>
          </ol>
        </li>
        <br>
        <li>
          <i>Minuman Panas:</i>
          <ol type="i">
            <li>Kopi Hitam</li>
            <li>Lemon Tea</li>
            <li>Hot Chocolate</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</body>

</html>

I am sorry if this question are confusing, because i cant explain it well

html css html-lists
Original Q&A
4

There are 4 best solutions below

0
AudioBubble On BEST ANSWER

Now this code displays exactly the same as your picture

<!DOCTYPE html>
<html lang="en">

<head>
<title>Pertemuan 03</title>
<style>
body {
  font-family: sans-serif;
}

h4 {
  text-decoration: underline;
}

.italic {
  font-style: italic;
}

ol {
    font-weight: lighter;
    
    

}

ul {
    font-weight: lighter;
    
}

.main-list{
    text-indent: 20px;
   
    
    

}
.main-list > li::before {
  content: none;
}

.main-list > li {
  font-weight: bold;
  padding-left: 16px;
  padding-bottom: 10px;
  
}
</style>
</head>

<body>
<h4>Menu:</h4>
<ol class="main-list">
 <li><b>Makanan:</b>
  <ol type="A">
    <li>Nasi Kuning</li>
    <li>Nasi Uduk</li>
    <li>Nasi Goreng</li>
  </ol>
 </li>
 <li><b>Lauk:</b>
   <ul type="disc">
    <li>Tahu Goreng</li>
    <li>Tempe Goreng</li>
    <li>Orek Tempe</li>
    <li>Cah Kangkung</li>
  </ul>
 </li>
 <li><b>Sayur:</b>
  <ol type="a" >
    <li>Sayur Asem</li>
    <li>Soto Ayam</li>
    <li>Sop Iga Sapi</li>
  </ol>
 </li>
 <li><b>Minuman:</b>
  <ol type="A">
    <li>
      <i>Minuman Dingin:</i>
      <ol type="i" >
        <li>Es Teh Manis</li>
        <li>Es Jeruk</li>
        <li>Es Campur</li>
      </ol>
    </li>
    <br>
    <li>
      <i>Minuman Panas:</i>
      <ol type="i" >
        <li>Kopi Hitam</li>
        <li>Lemon Tea</li>
        <li>Hot Chocolate</li>
      </ol>
    </li>
  </ol>
 </li>
 </ol>
 </body>

 </html>

4
Paulie_D On

Style the ::marker and reset the ::marker in the sub-menus.

li::marker {
  font-weight: bold;
}

li li::marker {
  font-weight: normal;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Pertemuan 03</title>
  <style>
    body {
      font-family: sans-serif;
    }
    
    h4 {
      text-decoration: underline;
    }
    
    .italic {
      font-style: italic;
    }
    
    ul li,
    ol li {
      text-indent: 20px;
      padding-bottom: 3px;
    }
  </style>
</head>

<body>
  <h4>Menu:</h4>
  <ol>
    <li>
      <b>Makanan:</b>
      <ol type="A">
        <li>Nasi Kuning</li>
        <li>Nasi Uduk</li>
        <li>Nasi Goreng</li>
      </ol>
    </li>
    <li>
      <b>Lauk:</b>
      <ul type="disc">
        <li>Tahu Goreng</li>
        <li>Tempe Goreng</li>
        <li>Orek Tempe</li>
        <li>Cah Kangkung</li>
      </ul>
    </li>
    <li>
      <b>Sayur:</b>
      <ol type="a">
        <li>Sayur Asem</li>
        <li>Soto Ayam</li>
        <li>Sop Iga Sapi</li>
      </ol>
    </li>
    <li>
      <b>Minuman:</b>
      <ol type="A">
        <li>
          <i>Minuman Dingin:</i>
          <ol type="i">
            <li>Es Teh Manis</li>
            <li>Es Jeruk</li>
            <li>Es Campur</li>
          </ol>
        </li>
        <br>
        <li>
          <i>Minuman Panas:</i>
          <ol type="i">
            <li>Kopi Hitam</li>
            <li>Lemon Tea</li>
            <li>Hot Chocolate</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</body>

</html>

Alternatively, you don't need the <b> tags at all. Just reset the font-weight on the submenus.

ul li,
ol li {
  font-weight: bold;
}

li li {
  font-weight: normal;
}


body {
  font-family: sans-serif;
}

h4 {
  text-decoration: underline;
}

.italic {
  font-style: italic;
}

ul li,
ol li {
  text-indent: 20px;
  padding-bottom: 3px;
  font-weight: bold;
}

li li {
  font-weight: normal;
}
<h4>Menu:</h4>
<ol>
  <li>
    Makanan:
    <ol type="A">
      <li>Nasi Kuning</li>
      <li>Nasi Uduk</li>
      <li>Nasi Goreng</li>
    </ol>
  </li>
  <li>
    Lauk:
    <ul type="disc">
      <li>Tahu Goreng</li>
      <li>Tempe Goreng</li>
      <li>Orek Tempe</li>
      <li>Cah Kangkung</li>
    </ul>
  </li>
  <li>
    Sayur:
    <ol type="a">
      <li>Sayur Asem</li>
      <li>Soto Ayam</li>
      <li>Sop Iga Sapi</li>
    </ol>
  </li>
  <li>
    Minuman:
    <ol type="A">
      <li>
        <i>Minuman Dingin:</i>
        <ol type="i">
          <li>Es Teh Manis</li>
          <li>Es Jeruk</li>
          <li>Es Campur</li>
        </ol>
      </li>
      <br>
      <li>
        <i>Minuman Panas:</i>
        <ol type="i">
          <li>Kopi Hitam</li>
          <li>Lemon Tea</li>
          <li>Hot Chocolate</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

0
Fatemeh Satouri On

you can use Marker ::: The :: Marker CSS Pseudo-Element Selects The Marker Box of a List Item, which type of contains a bullet or number. IT WORKS on Any Element or Pseudo-Element Set to Display: List-Item, Such As The

  • And Elements.

    <!DOCTYPE html>
<html lang="en">

<head>
    <title>Pertemuan 03</title>
    <style>
        body {
            font-family: sans-serif;
        }

        h4 {
            text-decoration: underline;
        }

        .italic {
            font-style: italic;
        }

        ul li,
        ol li {
            text-indent: 20px;
            padding-bottom: 3px;
        }

        /* marker and select li by class*/

        .bold::marker {
            color: rgb(7, 7, 7);
            font-weight: 900;
            font-size: 1rem;
        }
    </style>
</head>

<body>
    <h4>Menu:</h4>
    <ol id="ol">
        <li class="bold">
            <b>Makanan:</b>
            <ol type="A">
                <li>Nasi Kuning</li>
                <li>Nasi Uduk</li>
                <li>Nasi Goreng</li>
            </ol>
        </li>
        <li class="bold">
            <b>Lauk:</b>
            <ul type="disc">
                <li>Tahu Goreng</li>
                <li>Tempe Goreng</li>
                <li>Orek Tempe</li>
                <li>Cah Kangkung</li>
            </ul>
        </li>
        <li class="bold">
            <b>Sayur:</b>
            <ol type="a">
                <li>Sayur Asem</li>
                <li>Soto Ayam</li>
                <li>Sop Iga Sapi</li>
            </ol>
        </li>
        <li class="bold">
            <b>Minuman:</b>
            <ol type="A">
                <li>
                    <i>Minuman Dingin:</i>
                    <ol type="i">
                        <li>Es Teh Manis</li>
                        <li>Es Jeruk</li>
                        <li>Es Campur</li>
                    </ol>
                </li>
                <br>
                <li>
                    <i>Minuman Panas:</i>
                    <ol type="i">
                        <li>Kopi Hitam</li>
                        <li>Lemon Tea</li>
                        <li>Hot Chocolate</li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>
</body>

</html>

    The marker sees all the list-styles of your list. Hope this answer has been useful to you.

    • 1
    Ahmad On

    To achieve the exact formatting as shown in the picture, you can modify your HTML code by adding some additional CSS styling. Below is the updated code with the necessary modifications:

    body {
  font-family: sans-serif;
}

h4 {
  text-decoration: underline;
}

.italic {
  font-style: italic;
}

ul li,
ol li {
  text-indent: 20px;
  padding-bottom: 3px;
}

.list-number {
  font-weight: bold;
  margin-right: 5px;
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pertemuan 03</title>
  </head>
  <body>
    <h4>Menu:</h4>
    <ol>
      <li>
        <b>Makanan:</b>
        <ol type="A">
          <li>
            <span class="list-number">1.</span>Nasi Kuning
          </li>
          <li>
            <span class="list-number">2.</span>Nasi Uduk
          </li>
          <li>
            <span class="list-number">3.</span>Nasi Goreng
          </li>
        </ol>
      </li>
      <li>
        <b>Lauk:</b>
        <ul type="disc">
          <li>
            <span class="list-number">a.</span>Tahu Goreng
          </li>
          <li>
            <span class="list-number">b.</span>Tempe Goreng
          </li>
          <li>
            <span class="list-number">c.</span>Orek Tempe
          </li>
          <li>
            <span class="list-number">d.</span>Cah Kangkung
          </li>
        </ul>
      </li>
      <li>
        <b>Sayur:</b>
        <ol type="a">
          <li>
            <span class="list-number">i.</span>Sayur Asem
          </li>
          <li>
            <span class="list-number">ii.</span>Soto Ayam
          </li>
          <li>
            <span class="list-number">iii.</span>Sop Iga Sapi
          </li>
        </ol>
      </li>
      <li>
        <b>Minuman:</b>
        <ol type="A">
          <li>
            <i>Minuman Dingin:</i>
            <ol type="i">
              <li>
                <span class="list-number">1.</span>Es Teh Manis
              </li>
              <li>
                <span class="list-number">2.</span>Es Jeruk
              </li>
              <li>
                <span class="list-number">3.</span>Es Campur
              </li>
            </ol>
          </li>
          <br>
          <li>
            <i>Minuman Panas:</i>
            <ol type="i">
              <li>
                <span class="list-number">1.</span>Kopi Hitam
              </li>
              <li>
                <span class="list-number">2.</span>Lemon Tea
              </li>
              <li>
                <span class="list-number">3.</span>Hot Chocolate
              </li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </body>
</html>

    I made a .list-number class containing the list numbers to the elements.

    I applied a CSS style to the list-number class to make the numbers bold and add a margin between the number and the list item text. This should give you the desired formatting for your list items, including bold numbers as shown in the picture.

    Sorry if I didn't answer it right but according to your question and my understanding, I think this should be the right answer...

    Related Questions in HTML

    Related Questions in CSS

    Related Questions in HTML-LISTS

    Trending Questions

    Popular # Hahtags

    javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

    Popular Questions

    .

    Copyright © 2021 Jogjafile Inc.