如果利用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. poj 2492A Bug's Life

    http://poj.org/problem?id=2492 #include<cstdio> #include<cstring> #include<algorithm& ...

  2. WM_CLOSE、WM_DESTROY、WM_QUIT的区别(询问,销毁窗口,退出进程,都不是一回事)

    1.发送消息SendMessage.PostMessage PostMessage将消息放入消息队列后马上返回,而SendMessage直到窗口过程处理完消息后才返回 2.三个消息的区别 WM_CLO ...

  3. 常用SNS开源系统比较

    常用SNS开源系统比较 这 几天看了很多关于SNS(社交网络服务) 的东西..得到了不少启发..目前的IDEA是..可以在学校弄一个试试..主打的东西不能和现有的SNS冲突(如校内网).利用本地优势. ...

  4. POJ3041 Asteroids(二分图最大匹配)

    题目链接. 分析: 暂略. AC代码: #include <iostream> #include <cstdio> #include <cstring> #incl ...

  5. BZOJ1528: [POI2005]sam-Toy Cars

    1528: [POI2005]sam-Toy Cars Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 282  Solved: 129[Submit][S ...

  6. 输入一个单向链表,输出该链表中倒数第K个结点

    输入一个单向链表,输出该链表中倒数第K个结点,具体实现如下: #include <iostream> using namespace std; struct LinkNode { publ ...

  7. POJ Wormholes 3259

    题目描述: Farmer John 在探索农场的时候 惊奇的发现一些虫洞,虫洞是一个特殊的东西,他是一个单向通道,他能到达虫洞的另一端, 可以穿越到达之前的时间.Farmer John 的由N个农场组 ...

  8. "红色病毒"问题 HDU 2065 递推+找循环节

    题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=2065 递推类题目, 可以考虑用数学方法来做, 但是明显也可以有递推思维来理解. 递推的话基本就是状态 ...

  9. HDOJ 1019 Least Common Multiple(最小公倍数问题)

    Problem Description The least common multiple (LCM) of a set of positive integers is the smallest po ...

  10. Matlab:拟合(2)

    非线性最小二乘拟合: 解法一:用命令lsqcurvefit function f = curvefun(x, tdata) f = x() + x()*exp() * tdata); %其中x() = ...