我正试着列一张像这张照片一样的 list ,但我想我做不对.

enter image description here

我能够粗体只有列表,但我不能粗体使用生成的数字,我也想知道如何得到像在图片上的确切结果.

下面是我的代码:

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

如果这个问题让人困惑,我很抱歉,因为我解释不清楚.

推荐答案

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>

Html相关问答推荐

卸载伪元素 destruct 了CSS

如何在css中将包含多行文本的多个p-tag放在一起(并排)?

浏览器是在调整大小还是在全屏上交换视频源?

react :事件和转发器在特定代码段中不起作用

邮箱追踪器-有效,但在Gmail客户端中是否可以显示问号图标以外的其他内容?

有没有办法根据另一个项目调整FlexBox项目的大小?

尽管div高度为100%,div中的内容仍会溢出

如何在R rmarkdown中创建循环中的分页表?

带有下拉菜单的完整css导航-链接不起作用?

我在桌面版 html css 代码上给出了位置 margin-left margin-top 标签,如何将其删除到手机上以使其响应?

使单行路径的 svg 填充父级的 100% 宽度

如何使用 CSS 使粘性元素固定在视口顶部

为四开本网站主页添加背景图片

让 Iframe 覆盖整个页面

shinydashboard 标题中的位置标题

CSS 斜角与 3 行对齐

Bootstrap Grid System col 无法正常工作

在 EJS 中将元素放置在彼此下方的列中

如何在锚点可点击的伪元素周围制作空白?

在 Vue 3 中使用 JavaScript 数组显示 FontAwesome 图标