专栏首页前端之攻略div边框重叠,像素变粗,解决方法 原

div边框重叠,像素变粗,解决方法 原

如左图所示,靠在一起的div,由于边框紧挨着,显得粗,很不美观,如何变成后面正确显示,解决方法

    <ul class="firstul">
    	<li>cell</li>
    	<li>cell</li>
    	<li>cell</li>
    	<li>cell</li>
    	<li>cell</li>
    </ul>
ul.firstul{ display:table;border-collapse:collapse; margin-top:25px;margin-left:25px;}
ul.firstul>li{display:table-cell;padding:15px;border:1px solid #ccc;}

上面的例子是把ul和li转换为表格的形式,如果想根据窗口的大小,来控制一行显示的格式,上面的方法就无法解决了,如下的例子

ul.secondul{width:150px;overflow:hidden;padding-bottom:1px;margin-left:25px;}
ul.secondul>li{width:50px;height:50px;line-height:50px;float:left;text-align:center;border:1px solid #ccc;margin-right:-1px; margin-bottom:-1px;}

主要用到li的margin-right:-1px  margin-bottom:-1px;以及外面的ul  padding-bottom:1px(不用的话下面的线会不显示,因为margin-bottom:-1px  超出了div的范围)

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Canvas多列表文字的显示 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • Vuex-Action 原

     Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutati...

    tianyawhl
  • 列表页面指向 原

    在引用公共html页面时,为了便于知道当前所处的页面,我们往往在当前的页面采用特定的样式(如在当前页面的列表中加active class),实现原理是当a 的h...

    tianyawhl
  • transform集合

    用户7873631
  • 第1天:CSS基本样式

    记住:浏览器有默认margin和padding。样式最开始记得一定写:*{margin:0;padding:0}。

    半指温柔乐
  • 前端|3D立体视频翻转动画

    HTML5 3D立方体翻转动画特效是一款基于TweenMax制作多张图片拼接的3D立方体正方形旋转动画特效。

    算法与编程之美
  • 流动图书馆小程序实战

    流动图书馆是一个图书漂流和借阅工具,旨在共享闲置图书,并链接趣味相投的小伙伴。

    疯狂的小程序
  • CEATEC JAPAN 2018正式开幕,罗森官宣将展出其《虚拟店员》应用

    本月16日-19日,2018日本电子高新科技博览会(CEATEC JAPAN 2018)将于东京千叶举办。在大会正式举办前夕,著名便利店连锁巨头罗森与SHOWR...

    VRPinea
  • 数据结构和算法——二叉排序树

    一、二叉排序树 对于无序的序列“62,58,88,47,73,99,35,51,93,29,37,49,56,36,48,50”,是否存在一种高效的查找方案,使...

    zhaozhiyong
  • 5分钟面试指南(第二十九篇 mysql不可不知其三)

    本部分我们会为大家提供一些python初级工程师在面试过程中遇到的常见的面试题目,期望达到的效果:

    还是牛6504957

扫码关注云+社区

领取腾讯云代金券