li的border无法和上边对齐
如果利用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无法和上边对齐的更多相关文章
- CSS ul li a 背景图片与文字对齐
<div class="four"> <h2>电子商务</h2> <img src="images/photo2.gif&quo ...
- C-图文上边对齐
1.效果 1.1 样式设置 2 效果 2.1 样式
- css text-align-last设置末尾文本对齐方式
text-align-last:auto | start | end | left | right | center | justify auto: 无特殊对齐方式. left: 内容左对齐. cen ...
- ul li 下的元素内容垂直居中
CSS: <style> * {;; } li { list-style: none; } li span { border: 1px solid red; height: 100px; ...
- css技巧之如何实现ul li边框重合
提到边框重合,我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲,你看到了,正是这个,边框重合.其实我们不难发现,这个效果并不难,只是我们没有真正的动手做过而已,所以不知道怎么做,那么下面就是一个很 ...
- li span兼容性问题
li与span的搭配使用所产的浏览器兼容性问题 1.ls两位,设定了width还是没用.2.总结了一下就是,里面的标签漂浮以后,就不能撑起外层的容器了. 3.li要设至少一个宽度或高度,还要加上ove ...
- 如何解决两个li之间的缝隙
如何解决两个li之间的缝隙的问题: 在做一个类似按钮左右滑动的选择器的动效,遇到了个是关于li之间的缝隙的问题: HTML如下: <span class="c1mChanger&quo ...
- 利用vertical-align实现行内元素对齐
实际项目中,常常会遇到一排行内元素对齐排列的需求,但是往往它们是这样的 我们想要的其实是这样的 曾经我一度不得不使用定位来实现我想要的位置效果,将父元素设置 position:relative ,行内 ...
- 用ul li实现边框重合并附带鼠标经过效果
边框重合这个效果并不难,只是我们没有真正的动手做过而已,下面让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果 <!DOCTYPE html> <html lang=&qu ...
随机推荐
- Excel进行项目规划的好处
1.表格的方式 2.多个工作表 3.插入图片 4.清晰的规划 5.大众都能看得懂 6.辅助一些数据表设计,其他的流程设计 7.对项目该做什么,进度等等有一个明确的认识 8.项目管理,吃透需求,对进度把 ...
- POJ1125 Stockbroker Grapevine(最短路)
题目链接. 分析: 手感不错,1A. 直接穷举的起点, 求出不同起点到其它点最短路中最长的一条的最小值(好绕). #include <iostream> #include <cstd ...
- SQL SELECT INTO 语句
SQL SELECT INTO 语句可用于创建表的备份复件. SELECT INTO 语句 SELECT INTO 语句从一个表中选取数据,然后把数据插入另一个表中. SELECT INTO 语句常用 ...
- LeetCode——Pascal's Triangle
Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5,Retur ...
- Linux操作系统Centos7.2版本搭建Apache+PHP+Mysql环境
对于在校大学生来说腾讯云1元主机很划算,所以就申请了一台,打算在上面学习下linux,使用版本为centos7.2版本.在服务器上比较推荐centos,此版本生命周期较长,而且网上有关centos的教 ...
- Oracle sqlplus 语法
目录: 0. FREFACE 1. 执行一个SQL脚本文件 2. 对当前的输入进行编辑 3. 重新运行上一次运行的sql语句 4. 将显示的内容输出到指定文件 5. 关闭spool输出 6.显示一个表 ...
- 第一章 工欲善其事 必先利其器—Android SDK工具(3)
1.3没有真机一样开发--Android模拟器 有些时候,我们手头上可能并没有符合要求的Android设备.那么这时候我们是不是对调试或者开发就一筹莫展了呢?当然不是.由于我们有Android模拟器. ...
- linux下负载均衡(LVS安装与配置)【转】
一.LVS的三种包转发方式 LVS提供了三种包转发方式:NAT(网络地址映射).IP Tunneling(IP隧道).Direct Routing(直接路由) 不同的转发模式决定了不 ...
- PHP开发Android应用程序(转)
第一部分是指在Android系统的手机上直接写PHP脚本代码并立即运行:第二部分则继续讲解如何把写好的PHP脚本代码打包成akp安装文件. 首先,在手机上安装两个apk包. 一个是SL4A(Scrip ...
- C# string.Format谨慎使用
string.Format string.Format在处理文本的时候很有用处,但是在使用占位符的时候一定要注意内容中的特殊字符{}. 示例 string.Format("你好{0},这是{ ...