`
rebecca
  • 浏览: 316082 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

list-style-type 为什么总失效?

阅读更多

(一)list-style-type常用方法:

 

list-style属性一般都设置为none 。需要加 "·" 或是别的符号  最好直接用键盘输入 或用转义符号
ul{list-style:none; margin:0; padding:0}
ui li{line-height:Npx; } 一般是20px;

只要这样设置, 基本都不会有问题。

 

一般CSS 里都把Li{list-style:none;}


需要使用的时候,再单独定义li{background:url(…);}

 

(二)探讨list-style-type 为什么总失效?

关键是应用了float:left;属性,还有 list-style-position: outside; 属性造成的。原因如下:

1. 左浮动会使盒模型一个挨一个横向排练
2. 列表符号的位置在盒模型之外
3. 所以第二个列表项的符号被第一个列表项盖住

 

解决办法:
[code="css"]
li {
  list-style-position: inside;
}
[/code]

1
0
分享到:
评论

相关推荐

    li样式不显示使用overflow:hidden导致Li前面点、圈等样式不见

    实际上用了overflow:hidden 会影响 list-style,即当ul 中的li 的overflow 为hidden的时候, list-style不起作用,不显示前面的点、圈等样式。 解决办法:在ul或li内加入样式:list-style-position: inside; 即可。...

    C++ Primer英文第五版 Exercise习题答案对应代码

    由于原始的代码链接失效,这个补充资源显得尤为珍贵,它使得读者能够直接查看和运行解题代码,从而更好地理解解决问题的方法和C++的语法结构。 C++ Primer第五版覆盖了诸如基本语法、控制流(如条件语句和循环)、...

    jQuery完全实例.rar

    在文档的第一个表单中,查找所有的单选按钮(即: type 值为 radio 的 input 元素)。 jQuery 代码: $("input:radio", document.forms[0]); --------------------------------------------------------------------...

    CSS知识汇总.docx

    4. 列表样式:`list-style`可以设置为`none`以移除列表样式,`list-style-type`(如:square、disc、circle)用于设置列表项标记,`list-style-image`可使用图片作为列表项标记,`list-style-position`控制标记的...

    ECMALL数据库字典.pdf

    - nav_list:管理员的导航菜单列表。 - todolist:待办事项列表。 - recent_ip:最近登录的IP列表。 4. **ecm_ad_position** - 广告位表: - position_id:广告位的唯一标识。 - store_id:所属店铺ID。 - ...

    js使用小技巧

    checkbox扁平 <input type=checkbox style="position: absolute; clip:rect(5px 15px 15px 5px)"> 获取选中内容 document.selection.createRange().duplicate().text 自动完成功能 <input type=text ...

    最新jquery+easyui_api培训文档

    当设置为`true`时,`width`和`height`参数将会失效,默认值为`false`。 - **border**: 布尔类型,决定是否显示边界线,默认值为`true`。 **面板参数:** Accordion 面板继承自 Panel 组件,因此可以使用 Panel 的...

    使用Element的InfiniteScroll 无限滚动组件报错的解决

    然而,在实际使用过程中,可能会遇到一些技术问题,如“TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'”。 **一、问题描述** 当尝试使用InfiniteScroll组件时...

    linux系统中ls命令用法详解

    20. –indicator-style=方式:指定在每个项目名称后加上指示符号<方式>:none (默认),classify (-F),file-type (-p) 三、ls命令实例 * ls:列出当前目录下的所有文件和子目录 * ls -l:列出当前目录下的...

    thinkPHP使用post方式查询时分页失效的解决方法

    在使用ThinkPHP框架开发Web应用时,可能会遇到在POST方式查询数据时,分页功能失效的问题。这主要是因为ThinkPHP的默认分页机制是通过GET请求传递参数,而在POST请求中,这些参数不会自动附加到分页链接上,从而导致...

    linux 中的ls命令参数详解及ls命令的使用实例

    它的全称是list directory contents,用于列出目录内容,包括文件和子目录。`ls`命令的灵活性很高,用户可以通过不同的参数设置来自定义查看结果。 #### 二、ls命令基础用法 1. **命令格式**: ``` ls [选项] ...

    jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案

    list-style-type: none; margin: 0; padding: 5px 0 0 0; float: left; margin-right: 10px; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; ...

    javaEE大神宝典(面试吹水专用)

    JavaEE大神宝典是为Java面试者准备的专业参考资料,主要涵盖了Web开发的基本概念和关键技术。这份资料将帮助面试者理解和掌握Web前端的基础知识,包括HTML、CSS和JavaScript等核心内容。 1. HTML (HyperText Markup...

Global site tag (gtag.js) - Google Analytics