如上图所示,这是一个分页样式,a:hover时,需要改变边框的颜色。

我们知道,除表格之外,其他标签的border是不能合并的。要解决这个问题,思路有三:

1、table布局(大概很少有人愿意在这里使用table)

2、display:table (这或许是解决之道,如果你不考虑ie6和ie7的话)

3、outline(使用outline属性代替border,你会发现相邻的2个outline叠加了,这正是解决之道?好吧,很遗憾的是ie6和ie7还是不支持)

这个例子其实来自我加的一个javascript群,有人问到了这个问题= =,当时我的就只想到了这三个方法,但是都不妥当。于是这个问题就搁下了。

3天后,我又想到了这个问题,再次尝试解决。

终于找到第四种方案:margin-left

 .wrap{
width: 300px;
margin: 0 auto;
}
.box{
float: left;
}
.box a{
float: left;
width: 40px;
height: 40px;
background-color: #edd;
text-align: center;
line-height: 40px;
text-decoration: none;
position: relative;/*必须*/
z-index:;/*必须*/
border:1px solid #000;
margin-left: -1px;/*必须*/
} .box a:hover{
z-index:;/*必须*/
border:1px solid #f00; }
 <div class='wrap'>
<div class='box'>
<a href="javascript:;">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
<a href="javascript:;">4</a>
<a href="javascript:;">5</a>
</div>
</div>

点击查看效果

神奇的负margin解决border“合并”的更多相关文章

  1. 神奇的负Margin

    在做slide时候一般都是采用父元素超宽+overflow的做法,今天发现了用margin-right:-100%;可以让子元素全部重叠起来.效果也是不错的

  2. 负margin在布局中的运用(*****************************************************************)

    一.左右栏宽度固定,中间栏宽度自适应 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  3. 我知道你不知道的负Margin

    现如今,负margin技术的应用可谓越来越广,任一个大型站点惊鸿一瞥之下都会有其身影所在.个人认为负margin技术是学习css路上必不可缺少的课题之一,许多高级应用及疑难杂症修复都可以使用负marg ...

  4. 用margin还是用padding?(3)—— 负margin实战

    看过一篇文章是关于我知道你不知道的负Margin,里面对margin做了总结: 当margin四个值都为正数值的话,那么margin按照正常逻辑同周围元素产生边距.当元素margin的top和left ...

  5. 关于margin外边距合并的问题

    一 .兄弟元素margin外边距合并演示   当两个垂直方向相邻的兄弟元素都为常规流块盒,他们之间垂直方向的外边距不是两者之和,而是取两者中的最大值.这种现象被称为相邻的兄弟元素垂直方向外边距合并. ...

  6. 为什么margin-top不是作用于父元素【margin外边距合并问题】

    coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...

  7. css007 margin padding border

    css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周 ...

  8. [转]关于负margin在页面中布局的应用

    本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况 ...

  9. 负margin一些奇葩的布局技巧

    copy_from_ http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/ <!doctype html> &l ...

随机推荐

  1. python一些问题

    1.对于字符变量来说不需要深度复制,字符变量是不能改变的 2.文件读取结尾的判断是通过判读 line=self.fd.readline() if not line: //结束了 不用通过判断字符长度. ...

  2. python 找出数组重复的元素

    """ 从头扫到尾,只要当前元素值与下标不同,就做一次判断,numbers[i]与numbers[numbers[i]], 相等就认为找到了重复元素,返回true,否则就 ...

  3. Leetcode题目98.验证二叉搜索树(递归-中等)

    题目描述: 给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设一个二叉搜索树具有如下特征: 节点的左子树只包含小于当前节点的数.节点的右子树只包含大于当前节点的数.所有左子树和右子树自身必须也是 ...

  4. 剑指offer35----复制复杂链表

    题目: 请实现一个cloneNode方法,复制一个复杂链表. 在复杂链表中,每个结点除了有一个next指针指向下一个结点之外,还有一个random指向链表中的任意结点或者NULL. 结点的定义如下: ...

  5. Int和Integer(课上测试)

    截图 第一段代码: 第二段代码: 两段代码出现不同结果的原因:Integer类型的取值范围为-128至128之间,小于128的数(图1)为正确,大于128的数(图2)为错误

  6. 获取当前页面的webview ID

    代码: A页面 <script type="text/javascript"> var ws = null; mui.plusReady(function(){ ws ...

  7. 胜利点 final发布

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/10062 1.视频地址:https://www.bilibili.com/ ...

  8. elasticsearch+kibana setup

    加载示例数据,设置index的时候出错: 提示 forbidden 则可能是es的问题,需要执行如下命令: curl -XPUT -H "Content-Type: application/ ...

  9. nginx 反向代理实现负载均衡*理论

    Nginx负载均衡集群介绍 负载均衡集群提供了一种廉价,有效,透明的方法,来扩展网络设备和服务器的负载,带宽和吞吐量,同时加强了网络数据处理能力,提高了网络的灵活性和可用性. 搭建负载均衡服务的需求: ...

  10. 【Linux命令】find命令

    [find命令] 说明:find命令用来在指定目录下查找文件.任何位于参数之前的字符串都将被视为欲查找的目录名.如果使用该命令时,不设置任何参数,则find命令将在当前目录下查找子目录与文件.并且将查 ...