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 ...
随机推荐
- 测试Flask+PYTHON的WEB框架
参数URL: http://blog.csdn.net/qwiwuqo/article/details/8970621 安装flask之前,你必须要先安装python和easy_install. 安装 ...
- 作了点有意义 的事,加入CLOUDSTACK官方文档的中文翻译工作
https://www.transifex.com/ 昨天到今天,作了个部署构架方面的翻译.
- Android Broadcaset 简介
在Android中,Broadcast是一种广泛运用的在应用程序之间传输信息的机制.而BroadcastReceiver是对发送出来的Broadcast进行过滤接收并响应的一类组件.可以使用Broad ...
- Sublime一些设置
很喜欢sublime text 2 总是在新窗口中打开文件,很麻烦,文件打多了,就会出现N多窗口,虽然可以直接打开当前目录可以解决,但有时候查看其它项目中的单个文件,就比较麻烦.百度一直在搜索,无果. ...
- 2. Singleton模式
这两种方法都提到了使用模版: (1) 参考文章:http://www.cnblogs.com/08shiyan/archive/2012/03/16/2399617.html 不同: a. 该方法直接 ...
- USB Loader使用心得之游戏名称、简介、背景音乐
我在<WAD独立安装版USB Loader的下载和安装>(链接:http://www.cnblogs.com/duxiuxing/p/4255124.html)开头提到:“任何版本的USB ...
- spring中@value注解需要注意
首先,@value需要参数,这里参数可以是两种形式:@Value("#{configProperties['t1.msgname']}")或者@Value("${t1.m ...
- arc4random和arc4random_uniform
Objective-C 中有个arc4random()函数用来生成随机数且不需要种子,但是这个函数生成的随机数范围比较大,需要用取模的算法对随机值进行限制,有点麻烦. 其实Objective-C有个更 ...
- 转:ORM框架
转自 程序员成长之路:http://blog.csdn.net/zxc22436/article/details/6875220 对象关系映射(ORM)提供了概念性的.易于理解的模型化数据的方法.OR ...
- Struts2学习笔记(一):Struts2开发环境的配置
一.Struts2应用所需的jar文件. 开发struts2应用需要依赖的jar文件在解压目录下的lib文件夹里面.开发struts2程序最少需要的jar文件为:struts2-core-2.xx.j ...