前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >解决html中ol ul li的默认往左偏移的样式问题

解决html中ol ul li的默认往左偏移的样式问题

作者头像
唯一Chat
发布2023-03-26 10:28:06
2.3K0
发布2023-03-26 10:28:06
举报
文章被收录于专栏:陶士涵的菜地陶士涵的菜地

在HTML中,有序列表(ol)和无序列表(ul)元素通常会默认有一定的内边距(padding)和外边距(margin),这是由浏览器默认样式表所定义的。这些内边距和外边距可能导致列表向左偏移,从而出现左边超出的情况。

具体来说,olul元素的默认样式表通常会定义:

  • padding-left:列表项左侧的内边距,默认为 40px(不同浏览器可能略有不同)。
  • margin-left:列表元素左侧的外边距,默认为 0

因此,当你在HTML中使用olul元素时,它们的左边可能会默认超出。

解决

代码语言:javascript
复制
/* 去掉有序列表和无序列表的默认样式 */
ol, ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* 为有序列表添加数字编号 */
ol {
  list-style-type: decimal;
  margin-left: 20px;
}

/* 为无序列表添加实心圆点符号 */
ul {
  list-style-type: disc;
  margin-left: 20px;
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-03-26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档