如何在 HTML (OL LI) 上将数字和列表加粗而不影响子列表？

问题描述 投票：0回答：1

我正在尝试制作一个像这张图片一样的列表，但我想我做不到。

我只能将列表加粗，但无法将使用 生成的数字加粗，我也想知道如何获得如图所示的确切结果。

这是我的代码：

<!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>

如果这个问题令人困惑，我很抱歉，因为我无法很好地解释它

html css html-lists
1个回答
0
投票

在子菜单中设置 

::marker
的样式并重置 
::marker
。

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>

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