inline-block去掉空白距离的方法
一、现象描述:inline-block形式水平呈现的元素,换行显示或空格分割的情况下,元素之间会有间距,实例如下:
使用CSS将行内元素的display设置为inline-block时,也会出现间隔:
<ul class="test">
<li>首页</li>
<li>3D打印服务</li>
<li>3D打印机</li>
<li>关于我们</li>
</ul>
ul.test{width:500px;text-align:center;list-style:none;outside:none;background-color:#eee;padding:0 10px;}
ul.test li{display:inline-block;*display:inline;zoom:1;width:100px;background-color:#9f0;}
二、移除空格的方法:
方法一:去掉HTML代码标签之间的空格
或借助于标签注释
方法二:使用margin负值,由于margin负值的大小是与上下文字体和文字大小相关的,因此不适合大规模使用。
方法三:不设置闭合标签
方法四:使用font-size:0;
因chrome浏览器有一个默认的最小字体大小限制,为兼容chrome浏览器最好使用代码:font-size: 0; -webkit-text-size-adjust:none;
display: inline-block元素的父元素定义font-size:0 , 可去掉水平方向的空白, 子元素若要显示文字可重新定义font-size属性即可;
display: inline-block元素本身定义vertical-align属性可去掉元素垂直方向的多余空白。
方法五:使用letter-spacing字符间距
ul.test{letter-spacing:-8px;} ul li{letter-spacing:0;}
若只在父元素使用letter-spacing,li中文字会发生重叠
方法六:使用word-spacing单词间距
ul.test{word-spacing:-8px;} ul li{word-spacing:0;}
若只在父元素使用word-spacing也可达到相同的效果,且li中文字不会发生重叠
参考:http://blog.csdn.net/xiebaochun/article/details/39178579
inline-block去掉空白距离的方法的更多相关文章
- winform中button点击后再点击其他控件致使button失去焦点,此时button出现黑色边线,去掉黑色边线的方法
winform中button点击后再点击其他控件致使button失去焦点,此时button出现黑色边线,去掉黑色边线的方法 button的FlatAppearence属性下,设置BorderSize= ...
- JS去掉首尾空格 简单方法大全(原生正则jquery)
JS去掉首尾空格 简单方法大全 var osfipin= ' http://www.cnblogs.com/osfipin/ '; //去除首尾空格 osfipin.replace(/(^\s*)|( ...
- 海量数据挖掘MMDS week2: LSH的距离度量方法
http://blog.csdn.net/pipisorry/article/details/48882167 海量数据挖掘Mining Massive Datasets(MMDs) -Jure Le ...
- [Android] Android 去掉界面标题栏的方法
Android 去掉界面标题栏的方法 这个首先要区分当前Activity 是继承了 Activity 类 ,还是 AppCompatActivity 类 情况一:创建的activity默认继承了App ...
- 排错-windows平台下访问oracle em出现空白的解决方法
排错-windows平台下访问oracle em出现空白的解决方法 by:授客 QQ:1033553122 问题描述 IE浏览器本地访问oem,出现空白页面,就左上角有一行字符 http://loca ...
- 通过经纬度坐标计算距离的方法(经纬度距离计算)ZZ
通过经纬度坐标计算距离的方法(经纬度距离计算) 最近在网上搜索“通过经纬度坐标计算距离的方法”,发现网上大部分都是如下的代码: #define PI 3.14159265 static double ...
- iOS利用block实现链式编程方法(Objective-C链式编程)
objc利用block实现链式编程方法 因为不好读.block和其他语言的匿名函数一样,很多程序员刚开始很难主动去用他. 本文描述block作为属性的实际使用,看懂block,并讲解如何利用block ...
- php计算两个坐标(经度,纬度)之间距离的方法
本文实例讲述了php计算两个坐标(经度,纬度)之间距离的方法.分享给大家供大家参考.具体如下: 这里使用php计算两个坐标(经度,纬度)之间的距离,返回结果为米或者千米 function distan ...
- vue打包后显示空白正确处理方法
vue打包后显示空白正确处理方法是 1.找到配置文件(js与css加载不上) 修改 这样打包处理可以打开但是页面样式会找不到 2.修改(针对css中的图片加载不上) 找到对应的位置加上publicPa ...
随机推荐
- 浏览器获取ip地址
/** * 获取浏览器的ip地址 * @param request * @return */ public static String getIP(HttpServletRequest request ...
- SQLSERVER 16进制与10进制转换
最近工控项目中遇到的16进制与10进制转换,在.NET中比较容易实现,在SQLSERVER中发现没有直接的转换,尤其是出现超出范围的long负数,即无符号64位整数在sqlserver中的存储.网上找 ...
- 微信开发教程 Yank.WeiXin.Robot
http://www.cnblogs.com/yank/category/539657.html
- Python模块(scapy)
scapy scapy相当于linux的tcpdump的功能
- 第六篇 Integration Services:初级工作流管理
本篇文章是Integration Services系列的第六篇,详细内容请参考原文. 简介在前几篇文章中,我们关注使用增量加载方式加载数据.在本篇文章,我们将关注使用优先约束管理SSIS控制流中的工作 ...
- Exchanger示例
Exchanger有两个用户,当一(A)方调用exchange方法之后,就开始等待,直到另一(B)方开始调用exchange方法.两个exchange可以认为是原子性的. public class C ...
- iOS navigationbar 透明
[self.navigationController.navigationBar setTranslucent:YES]; // 为什么要加这个呢,shadowImage 是在ios6.0以后才 ...
- 使用duplicate target database ... from active database复制数据库
使用duplicate target database ... from active database复制数据库 source db:ora11auxiliary db:dupdb 1.修改监听文件 ...
- uiwebview加载中文URL
uiwebview加载中文URL _paperGamePath = [_paperGamePath stringByAddingPercentEscapesUsingEncoding:NSUTF8St ...
- Simple GDB case
to be added... gdb a.out [Inferior 1 (process 9718) exited with code 05] (gdb) list Line number ...