<ul>和<ol>显示问题 - 不同的压力

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (3)

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

<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;
    }
提问于
用户回答回答于

像其他答案一样 - 我假设你想删除ul上的边距和填充 - 但是然后重新阅读你的帖子 - 似乎你想要ul相对于文本的其余部分缩进 - 我让它缩进1em - 但你可以改变它。

我还建议CSS计数器(它会自动编号列表中的项目,并防止您必须手动添加“项目1 ...项目2 ......等) - 但要保持它与你拥有的一致 - 删除子弹点并在ul到1em上设置margin-left。

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>

扫码关注云+社区

领取腾讯云代金券