如果利用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. Java中RMI框架

    嘎嘎,有空写……先记着了

  2. request.getParameterMap();

    Map<String, String[]> map = request.getParameterMap(); for(Map.Entry<String,String[]> e: ...

  3. 【转】Ubuntu Server 12.04 静态IP简洁配置

    原文网址:http://blog.csdn.net/njchenyi/article/details/8715417 1.配置静态IP地址: # vim /etc/network/interfaces ...

  4. 【贪心】XMU 1061 Ckp的约会

    题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1061 题目大意: n个任务(n<=1000),给定名字和开始.结束时间,求最多能 ...

  5. Gas Station——LeetCode

    There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. You ...

  6. 【Cocos2d-X开发学习笔记】第10期:渲染框架之几何图形的绘制

    本系列学习教程使用的是cocos2d-x-2.1.4(最新版为3.0alpha0-pre) ,PC开发环境Windows7,C++开发环境VS2010 一.图形的绘制 有时为了调试游戏,我们常常会需要 ...

  7. org.apache.struts.chain.commands.InvalidPathException: No action config found for the specified url.

    No action config found for the specified url url路径下找不到action,原因是stuts-config.xml文件配置错误. demo的项目文件如下: ...

  8. java笔记8之选择结构IF

    注意1 A比较表达式无论简单还是复杂,结果必须是boolean类型        B:if语句控制的语句体如果是一条语句,大括号可以省略:          如果是多条语句,就不能省略.建议永远不要省 ...

  9. 《C专家变成》之二

    第五章 一.对链接的思考 目标文件并不能直接执行,它首先需要载入到链接器.链接器确认main函数为初始进入点(程序开始执行的地方),把符号引用绑定到内存地址,把所有的目标文件集中在一起,再加上库文件, ...

  10. ViewPage 大圣归来 原生示例

    VP简介 android-support-v4.jar 是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api.而ViewPage就是其中之一,利用它,我 ...