<ul>和<ol>显示问题-不同的意图

Question

我正在尝试显示这样的无序列表：

<p style="margin-top:1em; line-height: 1.4;">Dear John,</p>

<p style="margin-top:1em; line-height: 1.4;">Here's the list of items to collect:</p>

<p style="margin-top:1em; line-height: 1.4;"></p>

<ul>
<li>Item 1 - Apples</li>
<li>Item 2 - Bananas</li>
</ul>

看起来像这样：

如果我将其更改为有序列表，则显示如下：

我无法以与有序列表相同的方式使无序列表缩进。这是CSS的相关部分：

    html, body, h1, h2, h3, h4, h5, h6, p, ul, li{
        margin: 0;
        padding: 0;
    }
    body{
        font-family: 'Myriad Set', 'Myriad Pro', 'Myriad', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
        -webkit-font-smoothing: antialiased;
        max-width: 775px;
        margin: 0 auto;
        padding: 1.25em 0 0;
        font-size: 12pt;
        background-color: #fff;
        color: #000;
    }

Answer 1

像其他答案一样-我以为您想删除ul的边距和填充-但是然后重新阅读您的帖子-看来您希望ul与文本的其余部分缩进-我有缩进1em-但您可以更改。

我还建议使用CSS计数器（它将自动为列表中的项目编号，并避免您必须手动添加“ item 1 ... item2 ... etc”）-但要使其与您拥有的保持一致-删除项目符号点，并将ul上的左边距设置为1em。

html, body, h1, h2, h3, h4, h5, h6, p {
        margin: 0;
        padding: 0;
    }
    
    
  body{
      font-family: 'Myriad Set', 'Myriad Pro', 'Myriad', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
      -webkit-font-smoothing: antialiased;
      max-width: 775px;
      margin: 0 auto;
      padding: 1.25em 0 0;
      font-size: 12pt;
      background-color: #fff;
      color: #000;
  }
  
ul {
  list-style: none;
  margin-left: 1em;
  padding-left: 0;
}

p {
  margin-top:1em;
  margin-bottom:1em;
  line-height: 1.4;
}

a {
  color: #58aefe;
  text-decoration: none;
}

a:hover {
  color: blue;
  text-decoration: underline;
}

<p>Dear John,</p>

<p>Here's the list of items to collect:</p>


<ul>
  <li>Item 1 - Apples</li>
  <li>Item 2 - Bananas</li>
</ul>

<p>If you have any questions please contact the Warehouse at <a href="#">warehouse@acme.com</a></p>
<p>Thanks</p>
<p>Acme fruit suppliers</p>