overflow清楚浮动 + 去掉li标签的小圆点

原文链接:http://blog.163.com/[email protected]/blog/static/22928525201031211212955/

测试用例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#wrapper{ width:500px; background-color:#99CC00; overflow:hidden;}
#left{width:100px; height:100px; background-color:blue; float:left;}
#right{width:100px; height:100px;background-color:yellow; float:right;}
li{ overflow:hidden;}
</style>
</head>

<body>
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
</html>

时间: 2024-11-10 11:38:31

overflow清楚浮动 + 去掉li标签的小圆点的相关文章

如何去掉li标签的重叠边框

当我们的li标签设置了border的时候就会出现重叠边框,如何去掉呢,见代码 html代码 <ul class="friendLink_list"> <li><a href="javascript:;">营销费用管理</a></li> <li><a href="javascript:;">营销费用管理</a></li> <li>

如何在Html的CSS中去除&lt;li&gt;标签前面小黑点,和ul、LI部分属性方法

div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和.ul下写入list-sytle:none;当然有的会这样来写list-style-type:none, 这种写法特别是在一些CMS中最常见. 2.在相关的页面找到head部分写入下面的代码<style type="text/css">list-style:none;</

2017-05-17 js动态生成轮播图小圆点

从今天开始,把自己做的笔记转移到博客园: 今晚复习了一下动态创建轮播图小圆点做了一下小的笔记: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>2017-05-17 js动态生成轮播图小圆点</title> 6 <!-- author:ishou Mr丶Zhu --> 7

浮动元素的兼容以及ie6下li标签的部分兼容性问题

清除浮动的方法有许多比较常用的是 .clear{zoom: 1;} .clear:after{content: "";display: block;clear: both;} after伪类元素末尾添加内容Ie6,7不兼容可以用zoom来解决(zoom缩放会触发ie下的haslayout使元素根据自身内容计算宽高但火狐不支持但可以通过after伪类解决) 两者结合解决的浏览器不兼容的问题: ie6下li标签的部分兼容性问题: 可以通过给li标签加 vertical-align: top

去掉img标签周围的空白

我们在页面布局的时候,明明已经去掉了所有标签的margin和padding,img标签周围依然会有空白,解决方法有以下几种: 1.给img标签设浮动: img{ float:left; } 2.将img转换为块状: img{ display:block; } 3.img标签默认的vertical-align是baseline,也就是与字母x的下边距对齐,因此可以这样: img{ vertical-align:top; } 4.给父级设置font-size: <style> div{ font-

用ul、li标签 创建css横向导航菜单?(转)

创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,这种方法看起来很合理也很直观.但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白.所以,为了避免所有的链接都挤在一起,你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔,让这些文字分离开来,不至于混在一起. 现在我们正常的做法是应用ul.li标签把链接作为无序列表(unordered list)来标识.再应用CSS样式对其进行控制,按我们预想的形式在容器中显示出来.对导航条使用无序列表似乎是

利用li标签做菜单

现在我们用一个ul li标签来做一个菜单 首先来看看ul li 的基本样式 代码如下 <html> <head> <title>ul li</title> </head> <body> <ul> <li>首页</li> <li>个人主页</li> <li>消息中心</li> <li>充值中心</li> <li>会员中

li标签之间的空隙问题(转)

原文地址:http://www.cnblogs.com/laogao/archive/2012/08/13/2636419.html css li 空隙问题 IE6/7的Bug:纵向排列的li中加浮动元素产生向下3px的空隙 最近做页面时,经常碰到用 li 标签做纵向列表的时候,会在li的下面产生3px的空隙,之前也碰到过,但都用简单的方法解决了.搜索了一下,网上已经有人给出一些解决方案,但细看之后发现他们的解决方案和找到的原因都有些问题,甚至是错误.要么只单纯地提出问题,解决问题,没有更详细的

去除li小圆点以及解决其空格问题

不管是ul还是ol中的li前面始终有个小圆点,以前没有发现问题,都是直接给ul增加list-style:none;属性,可今天屡试不爽的属性出现问题了,上图 通过两张截图可以清晰的看到虽然小圆点去掉了,但是还是占着位置.典型的占着**不**,而且还影响视图效果,怎么办?先看看样式,里面没有margin或者padding这类的东东,然后看看盒模型,果然: 从盒模型可以看到ul有个padding,外围有margin,那就把padding去掉试试. 结果显示终于正常了,也没有占位了,完美!! 总结:修