css解决li边框重合问题

我直接写了个案例，先看下效果图：

下面是html代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>机构动态</title><style type="text/css">*{margin:0px;padding:0px; }.test_m ul {margin: 20px;width: 630px;overflow:hidden;border-top:1px solid black;}.test_m ul li{padding: 10px 20px 11px 20px;box-sizing: border-box;float: left;width: 315px;height: 111px;list-style: none;}.test_m ul li:nth-child(2n+1){border:1px solid black;border-top:0;}.test_m ul li:nth-child(2n){border-bottom:1px solid black;border-right:1px solid black;}</style></head><body><div class="test_m"><ul><li>菜单1</li><li>菜单2</li><li>菜单3</li><li>菜单4</li></ul></div></body>
</html>

css解决li边框重合问题相关推荐

ireport如何给static text加边框_html amp;amp; css 解决li浮动边框为2的问题
html && css 解决li浮动边框为2的问题思路问题:首先,li 浮动后,添加边框,则中间 li 的边框会形成 1+1=2 的效果,1px的边框会变成2px.(例:分页模块 ...
列表li边框重合问题
在我们写东西的时候经常要用到ul,但是也经常会出现li边框重合的问题,如下图: 可以看到每个格子的右边框和下边框明显有边框重合现象,这样很影响美观. 解决这个问题: 只要给每个li设置css ...
css技巧之如何实现ul li边框重合
提到边框重合,我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲,你看到了,正是这个,边框重合.其实我们不难发现,这个效果并不难,只是我们没有真正的动手做过而已,所以不知道怎么做,那么下面就是一个很 ...
css取li的点,CSS 去掉点li 的点
转:http://blog.sina.com.cn/s/blog_63b13c300100jyek.html 方法一: 百度雅虎新浪谷歌方法二: li {list-style-type:non ...
用ul li实现边框重合并附带鼠标经过效果
边框重合这个效果并不难,只是我们没有真正的动手做过而已,下面让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果 1 <!DOCTYPE html> 2 <html lang ...
html之解决边框重合问题，鼠标移动文字上文字抖动问题
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html 让表格在右侧显示不出来,css中怎么解决表格边框不显示的问题？
css中怎么解决表格边框不显示的问题? html中的表格默认是不显示边框的,可以设置表格的border属性来添加边框,设置cellspacing属性为0来将边框合并,显示单一边框. css中也可以设置 ...
html 语言表格边框显示,css中怎么解决表格边框不显示的问题？
css中怎么解决表格边框不显示的问题? html中的表格默认是不显示边框的,可以设置表格的border属性来添加边框,设置cellspacing属性为0来将边框合并,显示单一边框. css中也可以设置 ...
能使用html/css解决的问题就不要使用JS
为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例. 1. 导航高亮导航高亮是一种很常见 ...

css解决li边框重合问题

css解决li边框重合问题相关推荐

最新文章

热门文章