如果利用border设置四周的border,如果一边的边框比较长无法对齐

解决办法:

        .test{
position: relative;
border: 1px solid #808080;
height: 100px;
width: 100px;
}
.test:after{
content: '';
position: absolute;
right: -10px;
top:-1px;
width: 0;
height: 0;
border-width: 102px 10px 0 0;
border-style: solid;
border-color:red;
}
<div class="test"> </div>

li的border无法和上边对齐的更多相关文章

  1. CSS ul li a 背景图片与文字对齐

    <div class="four"> <h2>电子商务</h2> <img src="images/photo2.gif&quo ...

  2. C-图文上边对齐

    1.效果 1.1 样式设置 2 效果  2.1 样式

  3. css text-align-last设置末尾文本对齐方式

    text-align-last:auto | start | end | left | right | center | justify auto: 无特殊对齐方式. left: 内容左对齐. cen ...

  4. ul li 下的元素内容垂直居中

    CSS: <style> * {;; } li { list-style: none; } li span { border: 1px solid red; height: 100px; ...

  5. css技巧之如何实现ul li边框重合

    提到边框重合,我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲,你看到了,正是这个,边框重合.其实我们不难发现,这个效果并不难,只是我们没有真正的动手做过而已,所以不知道怎么做,那么下面就是一个很 ...

  6. li span兼容性问题

    li与span的搭配使用所产的浏览器兼容性问题 1.ls两位,设定了width还是没用.2.总结了一下就是,里面的标签漂浮以后,就不能撑起外层的容器了. 3.li要设至少一个宽度或高度,还要加上ove ...

  7. 如何解决两个li之间的缝隙

    如何解决两个li之间的缝隙的问题: 在做一个类似按钮左右滑动的选择器的动效,遇到了个是关于li之间的缝隙的问题: HTML如下: <span class="c1mChanger&quo ...

  8. 利用vertical-align实现行内元素对齐

    实际项目中,常常会遇到一排行内元素对齐排列的需求,但是往往它们是这样的 我们想要的其实是这样的 曾经我一度不得不使用定位来实现我想要的位置效果,将父元素设置 position:relative ,行内 ...

  9. 用ul li实现边框重合并附带鼠标经过效果

    边框重合这个效果并不难,只是我们没有真正的动手做过而已,下面让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果 <!DOCTYPE html> <html lang=&qu ...

随机推荐

  1. android Base64加密解密

    // 加密传入的数据是byte类型的,并非使用decode方法将原始数据转二进制,String类型的数据 使用 str.getBytes()即可 String str = "Hello!&q ...

  2. BZOJ2276: [Poi2011]Temperature

    2276: [Poi2011]Temperature Time Limit: 20 Sec  Memory Limit: 32 MBSubmit: 293  Solved: 117[Submit][S ...

  3. Moss的使用

  4. HTTP学习笔记6-请求报头

    29,请求报头: 请求报头允许客户端向服务器端传递该请求的附加信息以及客户端自身的信息. 30,Accept: Accept请求报头域用于指定客户端接受哪类型的信息,例如:Accept: image/ ...

  5. Facebook的手游出海之道

    对于不同的游戏公司,面临的同一个问题就是怎样让海外玩家能够一眼在App中发现你,成为你的新用户:不仅如此,怎样留住这些用户,让他们成为你游戏的忠实玩家也是让全部游戏开发商困扰的一个问题. w=580& ...

  6. linux boost 安装

    sudo apt-get install libboost-dev 但是,我这样安装以后,编译程序时出现了很多错误,而且都是系统文件的错误.我开始以为是我的boost库版本不对,后来换了好几个版本,都 ...

  7. CCDictionary&CCArray执行retain()重要点

    CCDictionary也需要执行retain(),否则则跟CCArray,返回则释放对象. 在Lua中,忘记了retain(),导致一些出现gCCDictionary:objectForKey(ke ...

  8. TCP总结

      TCP协议   <计算机网络>谢希仁 及笔记 TCP 的那些事儿(上):http://coolshell.cn/articles/11564.html TCP 的那些事儿(下):htt ...

  9. JAVA - hashcode与equals作用、关系

      Hashcode的作用 总的来说,Java中的集合(Collection)有两类,一类是List,再有一类是Set.前者集合内的元素是有序的,元素可以重复:后者元素无序,但元素不可重复.      ...

  10. 小学生之Java中迭代器实现的原理

    一. 引言 迭代这个名词对于熟悉Java的人来说绝对不陌生.我们常常使用JDK提供的迭代接口进行java collection的遍历: Iterator it = list.iterator();wh ...