margin隐藏最后的切割线
<style>
*{margin: 0;padding: 0;}
#demo li{
border-bottom: 1px solid #ccc;
}
#demo ul{
margin-bottom: -1px;
}
#demo{
overflow: hidden;
}
</style> <div id="demo">
<ul>
<li>写个内容事实上好困难啊。。。</li>
<li>写个内容事实上好困难啊。。 。</li>
<li>写个内容事实上好困难啊。 。 。</li>
<li>写个内容事实上好困难啊。 。。 </li>
<li>写个内容事实上好困难啊。 。。</li>
</ul>
</div> <style>
#demo2{
background: #aaa;
width:620px;
}
#demo2 ul{
margin-right: -100px;
overflow: hidden;
}
#demo2 li{
float: left;
margin-right: 10px;
}
.img{
width: 200px;
height: 200px;
background: #ddd;
} </style>
<div id="demo2">
<ul>
<li><div class="img"></div></li>
<li><div class="img"></div></li>
<li><div class="img"></div></li>
</ul>
</div>
一般来说,我们都不喜欢看到最后有一条线,可是用样式去清楚那最后的线,很麻烦,循环输出时,还要推断是否到结尾。
margin能够非常好的解决问题。
直接上代码,不解释。
margin隐藏最后的切割线的更多相关文章
- margin和padding那点事及常见浏览器margin padding相关Bug
用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的 ...
- 不要告诉我你懂margin
分类: Html/CSS | 转载请注明: 出自 海玉的博客 本文地址: http://www.hicss.net/do-not-tell-me-you-understand-margin/ 你真的了 ...
- Margin是什么?
Margin是什么 CSS 边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界,元素周围生 ...
- 关于前端的margin
margin 边界,元素周围生成额外的空白区.“空白区”通常是指其他元素不能出现且父元素背景可见的区域.——CSS权威指南 我比较喜欢使用“外边距”这个词来解释margin(同理padding可以称之 ...
- margin相关基本知识
什么是 margin ? CSS 边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界,元素 ...
- CSS技巧教程:margin在IE中的表现
margin的位移方向是指margin数值为正值时候的情形,如果是负值则位移方向相反. 如上图所示:黄色子元素盒的margin-top,margin-left为负值时,如-10px,则黄色子元素盒向上 ...
- BFC以及margin的深入探究
BFC(Block Formatting Context) 块级格式化上下文,它是指一个独立的块级渲染区域,只有block-level Box参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域 ...
- CSS的margin属性:详解margin属性
在网上看到的一篇文章,说的比较全面.原文地址:http://www.poluoluo.com/jzxy/201206/167007.html 你真的了解margin吗? 你知道margin有什么特性吗 ...
- 你是否彻底了解margin属性?
写css,你少不了与margin打交道.你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用padding而不是m ...
随机推荐
- Node里面的对象创建问题
1.利用new Object()创建时 var a =new Object() a.b = 1 console.log(a) // 打印出来是[object Object] console.log(J ...
- CList 点击表头排序 (2)两种排序方法中其中一种
上一篇讲解SortItem()方法如何使用,虽然都是抄别人的但是就是想让大家有个大概的了解 CList 点击表头排序 (1)SortItems函数 点击表头排序基本思路都是 1.首先响应HDN_ITE ...
- 2018/8/21 qbxt测试
2018/8/21 qbxt测试 期望得分:0? 实际得分:0 思路:manacher 会写模板但是不会用 qwq 听了某人的鬼话,直接输出0,然后就gg了 #include <cstdio ...
- [CortexM0--stm32f0308]discovery开发板
问题描写叙述:stm32提供了很多IC入门级开发板,价格还是蛮廉价的. stm32f0308-discovery就是一款cortex-m0架构的入门级开发板. 例如以下对其进行下简介. IO便 ...
- arcgis webapp builder 安装试用
ArcGIS WebApp Builder 是针对开发者的,用于高速构建基于HTML5/Javascript 技术的美观的 Web应用的一个工具. 用过Flex版本号的AppBuilder应该非常清楚 ...
- php函数,static,globalkeyword及三种变量作用域
函数 和js函数相似,关注php与其它语言不用的地方 函数的形參默认值 形式: function f($a,$b=3,$vc = "abc"){ } 注意:没有给默认值的形參必须传 ...
- hbs模板(zmaze ui用的)
hbs模板(zmaze ui用的) 一.总结 1.模板引擎:就是来生成界面的啊,只不过实现了view和数据分离以及一些其它的功能(预加载等). 2.Handlebars :但他是一个单纯的模板引擎,在 ...
- HTML基础第五讲---控制表格及其表项的对齐方式
转自:https://i.cnblogs.com/posts?categoryid=1121494 缺省情况下,表格在浏览器屏幕上左对齐,你可以使用<TABLE>的ALIGN属性来指定表格 ...
- Java exception handling best practices--转载
原文地址:http://howtodoinjava.com/2013/04/04/java-exception-handling-best-practices/ This post is anothe ...
- Writing Images to the Excel Sheet using PHPExcel--转载
原文地址:http://www.walkswithme.net/writing-images-to-the-excel-sheet-using-phpexcel Writing images to t ...