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

当我们的li标签设置了border的时候就会出现重叠边框,如何去掉呢,见代码

html代码

<ul class="friendLink_list">
                    <li><a href="javascript:;">营销费用管理</a></li>
                    <li><a href="javascript:;">营销费用管理</a></li>
                    <li><a href="javascript:;">营销费用管理</a></li>
                    <li><a href="javascript:;">营销费用管理</a></li>
                    <li><a href="javascript:;">营销费用管理</a></li>
                    <li><a href="javascript:;">营销费用管理</a></li>
                </ul>

css代码

.friendLink_list {
    list-style: none;
}

.friendLink_list li {
    float: left;
    border: 1px solid #aaa;
    display: block;
    width: 285px;
    height: 60px;
    text-decoration: none;
    margin: 0 0 -1px -1px;
    position: relative;
    z-index: 0;
    text-align: center;
    line-height: 60px;
    font-size: 15px;
}

.friendLink_list li a {
    color: #b5b5b6;
}

设置最终效果图

时间: 2024-10-09 08:42:33

如何去掉li标签的重叠边框的相关文章

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="h

去掉a标签超链接的虚线框的方法

去掉a标签超链接的虚线框的方法,需要的朋友可以参考下. a{ blr:expression(this.onFocus=this.blur()); /* IE Opera */ outline:none; /* FF Opera */ } a:focus{ -moz-outline-style: none; /* FF */ } 全 局控制 CSS实现 a{blr:expression(this.onFocus=this.close());} /* 只支持IE,过多使用效率低 */ a{blr:e

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

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

div放在li标签中,无法撑开li标签的问题

作为一个前端菜鸟,我又碰到问题了,今天把div放到li标签中,发现div并没有把li标签撑开,而是在li标签边界之外,具体情况如下图所示: 那么,怎样才能达到预期的效果(每个li中放置一个div标签,并且显示li的下边框)?只需要修改li标签的overflow属性即可,如下代码所示: li{ overflow: auto; } ok,问题完美解决,效果如下: ---------------------------------------------------------------------

利用li标签做菜单

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

strip_tags去掉HTML标签失败

现在有这样一个需求: 编辑器里面可以插入图片,添加新闻的内容,现在要从新闻的内容中截取一部分的文字,作为该篇新闻的描述,怎样做简单? 思路: 先用strip_tags函数去掉HTML标签,然后用 msubstr(这个函数不是TP自带的,需要手动加上)函数截取字符串 问题: strip_tags函数去掉HTML标签,失败 解决办法: 先用htmlspecialchars_decode($news_content)把一些预定义的 HTML 实体转换为字符,然后msubstr($str) $news_

IE浏览器下a标签嵌套img标签默认带有边框

最近写在线主页时发现IE浏览器下a标签嵌套img标签默认带有边框: 解决办法:img{border:0 none;} 注意,严格意义上0和none都要加上!

python去掉html标签

s = '<SPAN style="FONT- SIZE: 9pt">开始1~3<SPAN lang=EN-US>& lt;?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p></SPAN></SPAN>' import re d = re.sub('<[^

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

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