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

解决办法:

  1. .test{
  2. position: relative;
  3. border: 1px solid #808080;
  4. height: 100px;
  5. width: 100px;
  6. }
  7. .test:after{
  8. content: '';
  9. position: absolute;
  10. right: -10px;
  11. top:-1px;
  12. width: 0;
  13. height: 0;
  14. border-width: 102px 10px 0 0;
  15. border-style: solid;
  16. border-color:red;
  17. }
  18. <div class="test">
  19.  
  20. </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. LED驅動芯片最大特點

    最大特點是: 1.電源電壓在很寬的範圍內工作時,(約180V-265V)能保證 LED的恒功率輸出,並且 LED可實現無頻閃輸出. 2.實現安全隔離的安全電壓輸出,甚至是安全超低電壓輸出. 3.IC2 ...

  2. 如何让窗口控件半透明(控件在Paint自己时,首先向主窗口询问,获取主窗口上控件所在区域的背景图)

    在网上关于窗口视觉效果,有2个问题被问得最多:第一个是如何让窗口边框有阴影效果?第二个是如何让窗口控件有半透明效果? 对于第一个问题,我们的答案是用双层窗口模拟或是用Layered Window.在X ...

  3. java签名证书

    import java.io.FileInputStream; import java.security.KeyStore; import java.security.PrivateKey; impo ...

  4. COJ 0650 绝世难题(一) 可爱的仙人掌

    传送门:http://oj.cnuschool.org.cn/oj/home/problem.htm?problemID=620 绝世难题(一) 可爱的仙人掌 难度级别:E: 运行时间限制:1000m ...

  5. 【转】HashSet的用法

    原文网址:http://blog.csdn.net/aidesudi/article/details/4720201 Java代码 public class TestHashSet { public  ...

  6. Delphi TcxtreeList控件说明 转

    Delphi TcxtreeList控件说明   树.cxTreeList 属性: Align:布局,靠左,靠右,居中等 AlignWithMargins:带边框的布局 Anchors:停靠 (akT ...

  7. C#文本转语音并保存wav和MP3文件

    回顾上次写博客至今都有4个多月了,最近工作比较的忙没时间写博文.以后会多坚持写博文,与大家分享下最近遇到的问题.最近因为项目需要,研究了下用C#开发TTS.下面把大体的思路给大家说说,希望对大家有所帮 ...

  8. JavaScript之原型深入详解

    理解原型 原型是一个对象,其他对象可以通过它实现属性继承.任何一个对象都可以成为继承,所有对象在默认的情况下都有一个原型,因为原型本身也是对象,所以每个原型自身又有一个原型.任何一个对象都有一个pro ...

  9. jenkins 设置权限后管理员登陆提示:Access Denied admin没有Overall/Read权限

    jenkins 设置权限后,管理员登陆提示:Access Denied  admin没有Overall/Read权限 处理办法: window下编辑 xml 配置文件: %userprofile%\. ...

  10. Demon_接金币(三个掉落物品预设体,一接物体的工具)

    接物体的工具 using UnityEngine; using System.Collections; public class Tool : MonoBehaviour { float hor; V ...