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 ...
随机推荐
- 16.REPL 命令
转自:http://www.runoob.com/nodejs/nodejs-tutorial.html ctrl + c - 退出当前终端. ctrl + c 按下两次 - 退出 Node REPL ...
- Java 8 Stream Tutorial--转
原文地址:http://winterbe.com/posts/2014/07/31/java8-stream-tutorial-examples/ This example-driven tutori ...
- Java学习笔记二.2
5.运算符:变量的意义就在于可以进行运算,运算需要用运算符来表示,分为以下几种 class test { public static void main(String[] args) { //赋值运算 ...
- 手动挂接NFS
环境: 单板:s3c2440 内核:Linux-2.6.22.6 U-boot1.16 初始根文件系统Yaffs2 前提条件 1. 开发板上要烧写好文件系统 2. 能正常开机进入Linux系统 3. ...
- [React] Render Elements Outside the Current React Tree using Portals in React 16
By default the React Component Tree directly maps to the DOM Tree. In some cases when you have UI el ...
- @Import注解
转自:https://blog.csdn.net/heyutao007/article/details/74994161 @Import注解就是之前xml配置中的import标签,可以用于依赖第三方包 ...
- Jenkins学习总结(1)——Jenkins详细安装与构建部署使用教程
Jenkins是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能.Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括: 1.持续的软件版本发 ...
- 项目太大tomcat启动不起来
双击server,Open launch configuration Arguments VM arguments增加参数: -Xms512m -Xmx1024m -Xss4m -XX:PermSiz ...
- Dcloud课程5 php如何实现文件缓存技术(静态数据缓存)
Dcloud课程5 php如何实现文件缓存技术(静态数据缓存) 一.总结 一句话总结:保存在磁盘上的静态文件,用PHP生成数据到静态文件中.其实cookie和session使用的就是这样的技术,所以c ...
- vue中监听路由参数变化
今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值, 比如在这个页面 /aaa?id=1 ,在这个页面中点击一个按钮后 跳转到 /aaa?id=2 , 但从“/aaa?id=1”到“ ...