如果利用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. Excel进行项目规划的好处

    1.表格的方式 2.多个工作表 3.插入图片 4.清晰的规划 5.大众都能看得懂 6.辅助一些数据表设计,其他的流程设计 7.对项目该做什么,进度等等有一个明确的认识 8.项目管理,吃透需求,对进度把 ...

  2. POJ1125 Stockbroker Grapevine(最短路)

    题目链接. 分析: 手感不错,1A. 直接穷举的起点, 求出不同起点到其它点最短路中最长的一条的最小值(好绕). #include <iostream> #include <cstd ...

  3. SQL SELECT INTO 语句

    SQL SELECT INTO 语句可用于创建表的备份复件. SELECT INTO 语句 SELECT INTO 语句从一个表中选取数据,然后把数据插入另一个表中. SELECT INTO 语句常用 ...

  4. LeetCode——Pascal's Triangle

    Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5,Retur ...

  5. Linux操作系统Centos7.2版本搭建Apache+PHP+Mysql环境

    对于在校大学生来说腾讯云1元主机很划算,所以就申请了一台,打算在上面学习下linux,使用版本为centos7.2版本.在服务器上比较推荐centos,此版本生命周期较长,而且网上有关centos的教 ...

  6. Oracle sqlplus 语法

    目录: 0. FREFACE 1. 执行一个SQL脚本文件 2. 对当前的输入进行编辑 3. 重新运行上一次运行的sql语句 4. 将显示的内容输出到指定文件 5. 关闭spool输出 6.显示一个表 ...

  7. 第一章 工欲善其事 必先利其器—Android SDK工具(3)

    1.3没有真机一样开发--Android模拟器 有些时候,我们手头上可能并没有符合要求的Android设备.那么这时候我们是不是对调试或者开发就一筹莫展了呢?当然不是.由于我们有Android模拟器. ...

  8. linux下负载均衡(LVS安装与配置)【转】

    一.LVS的三种包转发方式      LVS提供了三种包转发方式:NAT(网络地址映射).IP Tunneling(IP隧道).Direct Routing(直接路由)     不同的转发模式决定了不 ...

  9. PHP开发Android应用程序(转)

    第一部分是指在Android系统的手机上直接写PHP脚本代码并立即运行:第二部分则继续讲解如何把写好的PHP脚本代码打包成akp安装文件. 首先,在手机上安装两个apk包. 一个是SL4A(Scrip ...

  10. C# string.Format谨慎使用

    string.Format string.Format在处理文本的时候很有用处,但是在使用占位符的时候一定要注意内容中的特殊字符{}. 示例 string.Format("你好{0},这是{ ...