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

热门问答

数据万象持久化在JavaScript SDK中的问题?

可以的,有Domain参数。请参考:https://github.com/tencentyun/cos-js-sdk-v5/blob/master/csp/csp.html#L56

有谁用unity 3d 实现过对象的上传储存和者下载?

我不是米

腾讯 · 工程师 (已认证)

对象存储工程师
推荐

请正确填写bucket参数,bucket参数里面不要带上-appid

cos.sliceUploadFile支持断点续传吗?

如果用的是 cos-js-sdk,那么 cos.restartTask 是会断点续传的,用法没有问题。 PS: sdk 使用可以参考 demo.js https://github.com/tencentyun/cos-js-sdk-v5/blob/master/demo/demo...... 展开详请

使用独立H5接入人脸核身,在微信浏览器拍摄视频按钮无法点击?

旺仔小小鹿

社区 · 运营 (已认证)

Less is more
推荐

使用iframe会有问题 ,微信有限制,不允许使用iframe调用jsapi摄像头 ,微信里,不能用iframe

ios应该都不行的,安卓需要看是什么浏览器。

云服务器中ping不可达,请教一下如何恢复?

推荐已采纳
本地主机 ping 不通实例可能由以下问题导致: 目标服务器的设置不正确 域名没有正确解析 链路故障 在确保本地网络正常的前提下(即您可以正常 ping 通其他网站),可根据以下操作进行排查: 检查实例是否配置公网 IP 检查安全组设置 检查系统设置 检查域名是否备案 检查域名解...... 展开详请

为什么加固之后生成四个文件?

腾讯云@移动安全

腾讯 · 移动开发工程师 (已认证)

腾讯云移动安全前端开发
推荐

选择最后一个_legu_aligned_signed.apk 文件,这个是加固并已重签名的文件。

所属标签

扫码关注云+社区

领取腾讯云代金券