list-style-type所使用的小按钮与LI正文间的间距、颜色、大小控制

说起列表标签li的运用,也许大家都挺熟悉,但是,关于list-style-type所使用的小按钮与LI正文间的间距、颜色、大小控制也许很多人都不是特别熟悉,这里就常见用法,做简单总结:

list-style-type    小按钮的类型

list-style-position 小按钮的位置(列表里inside和列表外outside)

list-style-image 小按钮用图片代替

我们常见的列表用法如下例子:

示例代码

如果调整小按钮颜色和大小,只需要相应的在ul标签中改变color和font-size就行了;

这里,如果想改变小按钮和Li之间的距离,用自动生成的小按钮无法做到;

另外,如果项目中要求,小按钮和li中的文字颜色不一样的话,自动生成的li也很难做好,

这时,我们有必要引入背景图片,在li上设置padding-left,然后再引入背景图片

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,910评论 25 709
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 11,934评论 0 17
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 13,745评论 3 184
  • 教程整理自慕课网(原文部分错误在这篇文章得到修改,本文版本Bootstrap3.3.7)。 框架简介 Bootst...
    小小奶狗阅读 7,429评论 0 5
  • 这次出远门,其实也不远,就是去姥姥家。 8个月,开始认生,被姥姥一把抱走,大哭,于是,那一个早上都在哭。。。。 怎...
    林小夏199阅读 1,463评论 0 1

友情链接更多精彩内容