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 ...
随机推荐
- JMS 问题java.lang.NoClassDefFoundError: weblogic/security/acl/UserInfo
run: Exception in thread "main" java.lang.NoClassDefFoundError: weblogic/security/acl/User ...
- Jzzhu and Chocolate
CF#257 div2 C:http://codeforces.com/contest/450/problem/C 题意:n*m的方格,每次可以横着或者纵向的切一刀,问切k之后,最小的最大是多少. 题 ...
- pl/sql 程序块里打印问题
declare v_number NUMBER; v_number2 NUMBER; begin select count(*) into v_number from dual; DBMS_OUTPU ...
- Bellman_ford最短路
#include <cstdio> #include <iostream> #include <algorithm> #include <cstring> ...
- NET设计模式(2):单件模式(Singleton Pattern)[转载]
单件模式(Singleton Pattern) ——.NET设计模式系列之二 Terrylee,2005年12月07日 概述 Singleton模式要求一个类有且仅有一个实例,并且提供了一个全局的访问 ...
- MARCHdesign_王濤's 星云个人网站 | www.xingyun.cn/MARCHdesign
MARCHdesign_王濤's 星云个人网站 | www.xingyun.cn/MARCHdesign MARCHdesign_王濤
- 修改ORACLE的语言参数
ALTER SYSTEM SET nls_territory = "CHINA" SCOPE=SPFILE; ALTER SYSTEM SET NLS_CURRENCY = '¥' ...
- jquery and js 判断一个元素是否存在
一.javascript中判断一个元素是否存在 if(document.getElementById('example')){ // do sth } 二.jquery中判断一个元素是否存在 < ...
- AFNetworking (3.1.0) 源码解析 <一>
首先说一下AFNetworking的github地址:GitHub - AFNetworking/AFNetworking: A delightful networking framework for ...
- IOS学习教程
http://edu.51cto.com/course/course_id-566.html