`

标签<li> 引起的缩进问题 list-style: none outside none;

 
阅读更多

一般网站css都有相应的初始化部分,最近遇到一个棘手问题。

li 标签里面的东西,在firefox下正常,而在ie6全部被缩进,而初始化的部分css也有:list-style none ;

并且这个li没有相应的id或者class,那么是被什么控制了呢?原来还是初始化部分的问题:应该为:list-style none outside none ;兼容才是正解。在这不妨要夸奖一下,firebug这个插件,本来我这原始的css就是: list-style none ; 但在firebug里面被解析为:list-style none outside none ; 也就是相当于自动优化了吧。

最后到处看看大网站的li初始化,原来都是outside!

另外:overflow:hidden;white-space:nowrap;可以防止文本过长自动换行。

分享到:
评论

相关推荐

    CSS中的ul与li样式详解.docx

    &lt;li&gt;这里是使用 list-style-position 属性值为 outside 的示例。请注意换行以后项目符号的位置。&lt;/li&gt; &lt;li&gt;这里是列表内容&lt;/li&gt; &lt;li&gt;这里是列表内容&lt;/li&gt; &lt;/ul&gt; 再来看一下属性值为 inside 的样式: li { list-...

    2.2.37 CSS列表属性(二)列表项目图像:list-style-image.docx

    "CSS 列表属性:list-style-image 和 list-style-position" CSS 列表属性是 CSS 中的一种样式属性,用于控制列表的样式和布局。本文主要介绍了 list-style-image 和 list-style-position 两个属性的用法和应用。 ...

    博客 网页制作

    "&gt;&lt;ul id="ul1"style="list-style:none;"&gt; &lt;li&gt;我的博客&lt;/li&gt; &lt;li&gt;精彩看点&lt;/li&gt; &lt;li&gt;出行交通&lt;/li&gt; &lt;li&gt;饮食卫生&lt;/li&gt; &lt;li&gt;行走见闻&lt;/li&gt; &lt;li&gt;经典摄影&lt;/li&gt; &lt;li&gt;旅游购物&lt;/li&gt; &lt;li&gt;博客讨论&lt;/li&gt; &lt;li&gt;关于我&lt;/li&gt; ...

    li标签前面添加图标

    &lt;li&gt;&lt;i class="fas fa-star"&gt;&lt;/i&gt; 列表项1&lt;/li&gt; &lt;li&gt;&lt;i class="fas fa-star"&gt;&lt;/i&gt; 列表项2&lt;/li&gt; &lt;/ul&gt; ``` 在这个例子中,`&lt;i&gt;`标签用于插入图标,`fas fa-star`是Font Awesome的类名,表示“star”图标。 ...

    嵌套ul li 实现简单的二级菜单

    `&lt;li&gt;`则代表列表项,每个菜单项都应包含在一个`&lt;li&gt;`中。对于二级菜单,主菜单项下的子菜单会再嵌套一个`&lt;ul&gt;`,如下所示: ```html &lt;ul class="main-menu"&gt; &lt;li&gt; 主菜单1 &lt;ul class="sub-menu"&gt; &lt;li&gt;子菜单1-...

    2.2.36 CSS列表属性(一)列表项目符号:list-style-type.docx

    &lt;li&gt;时间都去哪儿了&lt;/li&gt; &lt;li&gt;答案&lt;/li&gt; &lt;/ol&gt; ``` CSS样式: ``` &lt;style type="text/css"&gt; ul { list-style-type: circle; } ol { list-style: upper-roman; } &lt;/style&gt; ``` 运行完整的案例代码,得到的...

    精美浮动代码及图片

    &lt;li style="display: list-item;"&gt; &lt;div style="margin-left: -5px;" class="fxbox"&gt; &lt;a href="#" class="fxboxcon" target="_blank"&gt; &lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;li style="display: list-item;"&gt; &lt;div style=...

    ul的li样式

    本篇文章将深入探讨如何利用CSS来调整`&lt;ul&gt;`和`&lt;li&gt;`的样式,以及它们在选项卡式设计中的应用。 首先,`&lt;ul&gt;`元素用来创建一个无序的项目列表,每个列表项则由`&lt;li&gt;`元素定义。默认情况下,浏览器会为`&lt;ul&gt;`添加一...

    翻页效果,鼠标悬停的时候放大

    &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;6&lt;/a&gt;&lt;/li&gt; ...

    HTML主要属性

    - `list-style-type`:用于控制列表项前的符号样式,如`none`可以去除默认的小圆点。 - 示例: ```html &lt;ul&gt; &lt;li&gt;项目1&lt;/li&gt; &lt;li&gt;项目2&lt;/li&gt; &lt;/ul&gt; ``` 2. **有序列表 `&lt;ol&gt;`** - 作用:创建一个编号列表...

    好看的下拉菜单

    &lt;li&gt;&lt;a href="../mozilla/content.html" title="Using content:"&gt;content:&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="../mozilla/moxbox.html" title=":hover applied to a div"&gt;mozzie box&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="../mozilla/rainbow....

    雅虎TAB效果代码 Javascript实现

    list-style:none; position:relative;} #tabs ul li {float:left; display:inline; width:125px; height:53px; margin:0 4px;} #tabs ul li a.outer {display:block; width:125px; height:49px; border-bottom:1px ...

    html笔记.docx

    &lt;li&gt;第一项&lt;/li&gt; &lt;li&gt;第二项&lt;/li&gt; &lt;/ul&gt; ``` #### 图像和超链接 - `&lt;img&gt;`:插入图像。 - 示例: ```html &lt;img src="image.jpg" alt="示例图片" width="300" height="200"&gt; ``` - `&lt;a&gt;`:创建超链接。 - ...

    DIV_CSS下拉菜单

    其中,外层`&lt;ul&gt;`中的`&lt;li&gt;`作为菜单项,内层`&lt;ul&gt;`中的`&lt;li&gt;`则为具体的下拉选项。 #### 三、CSS样式分析 接下来,我们详细分析一下CSS样式是如何实现下拉菜单的效果的。 ##### 1. 基础样式设置 ```css * { ...

    jquery 图片轮播

    "&gt;1&lt;/li&gt;&lt;li style="list-style: none outside none; float: left; width: 18px; height: 18px; border-width: 1px; border-color: rgb(153, 153, 153); border-style: solid; background: none repeat scroll 0% 0%...

    html 学习入门

    - 每个项目同样使用`&lt;li&gt;`标签定义。 - 示例: ```html &lt;ol&gt; &lt;li&gt;第一步&lt;/li&gt; &lt;li&gt;第二步&lt;/li&gt; &lt;/ol&gt; ``` #### 六、图像的处理 - **图像标签(`&lt;img&gt;`):** - 用于在文档中插入图像。 - 必须指定`src`...

    2.2.38 CSS列表属性(三)列表项目符号位置:list-style-position.docx

    &lt;li&gt;网页平面设计&lt;/li&gt; &lt;li&gt;JAVA&lt;/li&gt; &lt;li&gt;php&lt;/li&gt; &lt;li&gt;.net&lt;/li&gt; &lt;/ul&gt; &lt;ul class="out"&gt; &lt;li&gt;网页平面设计&lt;/li&gt; &lt;li&gt;JAVA&lt;/li&gt; &lt;li&gt;php&lt;/li&gt; &lt;li&gt;.net&lt;/li&gt; &lt;/ul&gt; ``` 在上面的 HTML 代码中,我们定义了...

    HTML教程 文档

    5. **`&lt;ol&gt;`**、**`&lt;ul&gt;`**、**`&lt;li&gt;`**:有序列表和无序列表标签。 - 示例: - 有序列表: ```html &lt;ol&gt; &lt;li&gt;项目1&lt;/li&gt; &lt;li&gt;项目2&lt;/li&gt; &lt;/ol&gt; ``` - 无序列表: ```html &lt;ul&gt; &lt;li&gt;项目1&lt;/li&gt; &lt;li&gt;...

    简单的div+css模板适合新手

    &lt;LI&gt;&lt;A title="业务模块" href="#"&gt;业务模块&lt;/A&gt;&lt;/LI&gt; ... &lt;/UL&gt; &lt;/div&gt; &lt;!-- 侧边栏 --&gt; &lt;div&gt; &lt;div&gt; &lt;h2&gt;sideleftdfgdfgdfg&lt;/h2&gt; &lt;/div&gt; &lt;div&gt; &lt;UL&gt; &lt;LI&gt;&lt;A title="栏目" href="#"&gt;栏目&lt;/A&gt;&lt;/LI&gt; ......

    CSS的ul和li实现横向排列和去掉li的点

    使用`&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`标签可以使内容的逻辑更加清晰,尤其是在语义化标签大行其道的当下,这样的结构化列表更符合Web标准的发展方向。 通过这些知识的探讨,我们应该能够更好地理解和掌握列表样式的控制方法...

Global site tag (gtag.js) - Google Analytics