如何清除LI之间的间距

最新推荐文章于 2023-05-11 16:57:07 发布

mole

最新推荐文章于 2023-05-11 16:57:07 发布

阅读量4.9k

点赞数

分类专栏： CSS 文章标签： li 间隙间距清除去除

未经本人同意，禁止复制文章内容

本文链接：https://blog.csdn.net/mole/article/details/42402493

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这两天在做一个竖向排列的菜单，考虑到访问速度问题，决定不使用大块的背景图来解决鼠标移动和选中后的背景色问题。但是，一个问题始终困扰着我，IE下各项菜单之间的间距很大(FireFox下无此问题)，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-type" content="text/html;charset=GB2312">
<meta http-equiv="X-UA-Compatible"content="IE=EmulateIE7">
<title></title>
<style type="text/css">

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{
　margin:0;
　padding:0;
}

body {
　background:#ffffff;
　color:#000000;
　font:12px/20px "SimSun", "宋体", "Arial Narrow";
　webkit-text-size-adjust: none;
}

img {
　border:none;
}

a {
　color:#000000;
　text-decoration: none;
}

.main_catalog {
　position:relative;
　float:left;
　top:0px;
　left:0px;
　width:100px;
　border-style: solid;
　border-width: 1px;
　border-color: #BEBEBE;
　background-color: #E0E0E0;
}

.main_catalog .cata-selected {
　position:relative;
　left:0px;
　top:0px;
　list-style-type: none;
　width:100%;
　height:34px;
　font-weight:normal;
　font-size:18px;
　text-align:center;
　line-height:34px;
}

.main_catalog .cata-unselected {
　position:relative;
　left:0px;
　top:0px;
　list-style-type: none;
　width:100%;
　height:34px;
　font-weight:normal;
　font-size:18px;
　text-align:center;
　line-height:34px;
}

.main_catalog ul {
　list-style-type: none;
　margin:0;
　line-height:0px;
}

.main_catalog .cata-split {
　position:relative;
　left:0px;
　top:0px;
　list-style-type: none;
　width:100%;
　height:1px;
　background-image: url(/img/main-catalog-split.jpg);
}

.main_catalog a {
　position:relative;
　float:left;
　left:0px;
　top:0px;
　display:block;
　height:34px;
　width:100px;
}

.main_catalog img {
　position:relative;
　float:left;
　left:0px;
　height:1px;
　width:100px;
　margin-left:-1px;
}

.main_catalog .cata-selected a {
　background-color: #FFFFFF;
　font-weight:bold;
}

.main_catalog .cata-unselected a {
　background-color: #E0E0E0;
}

.main_catalog .cata-unselected a:hover {
　background-color: #FFFFFF;
　font-weight:bold;
}

</style>

</head>
<body>
　<div class="main_catalog">
　　<ul>
　　　<liclass="cata-selected"><ahref="#">图书音像</a></li>
　　　<liclass="cata-split"></li>
　　　<liclass="cata-unselected"><ahref="#">数码家电</a></li>
　　　<liclass="cata-split"></li>
　　　<liclass="cata-unselected"><ahref="#">服装鞋帽</a></li>
　　　<liclass="cata-split"></li>
　　　<liclass="cata-unselected"><ahref="#">个护化妆</a></li>
　　</ul>
　</div>
</body>
</html>
测试了很多方式都没有解决，后来发现css配置中.main_catalog .cata-selected、.main_catalog.cata-unselected以及.main_catalog.cata-split没有float:left。加入后，菜单能很好的显示了。
从网上资料中得知设置float:left的元素脱离了默认布局，遇到多个这样的元素，一旦显示超过右侧边界，浏览器就自动重起一行开始排列。那么是否可以认为，默认布局过程中，li之间是有间距的，而且在整个调试过程中发现这个间距是根据内部元素的高度而变化的。

mole

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何清除LI之间的间距

这两天在做一个竖向排列的菜单，考虑到访问速度问题，决定不使用大块的背景图来解决鼠标移动和选中后的背景色问题。但是，一个问题始终困扰着我，IE下各项菜单之间的间距很大(FireFox下无此问题)，代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN""http://www.w3.org/TR/html4/loose
复制链接

扫一扫