inline-block元素的空白间距
inline-block元素的空白间距
html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.outer{
height:40px;
width:260px;
border:1px solid green; }
ul{
list-style:none;
margin:0;
padding:0;
border:1px solid red;
padding:10px;
}
ul li{
border:1px solid green;
width:300px;
display:inline-block;
}
</style>
</head>
<body>
<div class="outer">
<a href="#" title="行内元素">行内元素</a>
<a href="#" title="行内元素">行内元素</a>
<a href="#" title="行内元素">行内元素</a>
</div>
<ul>
<li>用display:inline-block取代float布局</li>
<li>用display:inline-block取代float布局</li>
<li>用display:inline-block取代float布局</li>
</ul>
</body>
</html>
效果:

这种空白在要求不是特别严格的时候,其实无伤大雅,但又的时候我们就需要清除这些空白
清除的方法也是多种多样,我这里举出几个常用呀;
元素之间出现空白的原因是标签端之间的空白,各种方法去掉
方法一:改变html的布局方式
方式二:margin-right:-负值
方式三:外层容器font-size=0;有文字的容器,我们单独的设置font-size:想要的值
考虑到兼容性(chrome);-webkit-text-size:none;(Safari下可问题依然存在)
还有方式n...........
最终查阅多方资料和实践,最兼容的写法:
.finally-solve{
letter-spacing:-4px;/*根据不同的字体字号或许要做一定的调整*/
word-spacing:-4px;
font-size:;
}
finally-solve ele{
font-size:16px;
letter-spacing:normal;
word-spacing:normal;
display:inline-block;
*display:inline;
zoom:;
}
ps:
letter-spacing:10px;/*它改变的每个字母之间的间距不是单词之间的间距*/
word-spacing:30px; /*它改变的是每个单词之间的间距,仅仅限于英
inline-block元素的空白间距的更多相关文章
- inline-block元素的空白间距解决方法<转>
使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果.有关于使用inline-block来代替float的讨论也蛮多的. 不过就是使用inline ...
- 如何解决inline-block元素的空白间距 css 完美解决
转载W3CPLUS,链接地址:http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements 有关于使用inli ...
- 去除行内(inline/inline-block)元素之间的间距
先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...
- 如何解决inline-block元素的空白间距
早上在博客中有人提了这样一个问题:“li元素inline-block横向排列,出现了未知间隙”,我相信大家在写页面的时候都遇到过这样的情况吧. 我一般遇到这情况都会把li浮动起来,这样就没有间隙.但是 ...
- 使用CSS如何解决inline-block元素的空白间距
早上在博客中有人提了这样一个问题:“li元素inline-block横向排列,出现了未知间隙”,我相信大家在写页面的时候都遇到过这样的情况吧. 我一般遇到这情况都会把li浮动起来,这样就没有间隙.但是 ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- inline-block元素的空白间距解决方法
方法1 <ul><li>item1</li><li>item2</li><li>item3</li><li&g ...
- inline-block及解决空白间距
參考:http://www.jb51.net/css/76707.html http://www.webhek.com/remove-whitespace-inline-block/ inline-b ...
- inline元素和inline-block元素的4px空白间距解决方案
实在不想写了,要吐了,看到一篇讲的比较全的文章,直接粘链接了 inline元素和inline-block元素的4px空白间距解决方案 出自脚本之家
随机推荐
- Redis错误配置详解
在使用Redis做缓存时,应用往往能得到非常高的性能.然而,如果配置不当,你将遇到很多令人头疼的问题,比如复制缓冲区限制.复制超时等. Redis提供了许多提高和维护高效内存数据库使用的工具.在无需额 ...
- 让input不可编辑的方法
两种方法: disabled="true " 文字会变成灰色,不可编辑. readOnly="true" 文字不会变色,也是不可编辑的 <input na ...
- hdu 3348 coins
这道题算是一道很经典的题,很好的诠释了贪心和动态规划的不同功能.求最少钱的数量用贪心就够了,但是求最多钱的数量要用到动态规划的思想,每步都尽量保留最大 数量.具体看程序注解: #include&quo ...
- 【新产品发布】【iCore2 ARM / FPGA 双核心板】
iCore2是一款包含ARM / FPGA两大利器的双核心板.ARM方面,采用意法半导体高性能的32位Cortex-M3内核STM32F103VE微处理器,主频达72MHz,并包含丰富外设接口.FPG ...
- JavaScript操作DOM对象
js的精华即是操作DOM对象 [1]先看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
- 优雅的函数式编程--Clojure概述
欢迎转载,转载请注明出处,徽沪一郎. 楔子 由于阅读storm源码的原因,头一次接触到Clojure.没有花特别的时间来研究clojure语法,只是在一些特殊的用法时,才查了一下clojure官网的文 ...
- jQuery Ajax 确定 form 表单 submit 提交成功
使用 jQuery 提交表单,可以使用 同步方式(async: false). a.html 是 html 文件,a.php 是服务端文件,把 a.html 中表单的数据提交到 a.php 中,在提交 ...
- IE6 — 你若安好,便是晴天霹雳 [ 乱弹 ]
为什么还有人在用IE6?估计和中国的盗版业有很大关系吧.小白的电脑启不来了,请人重装系统,一张古老的Ghost搞定,IE6便落地生根.今天碰到一例报告说某网站在IE6下丑陋吓人,无心无力去解决,于是来 ...
- Find命令搜索过去一段时间内修改过的文件
Find命令搜索过去一段时间内修改过的文件 服务器 kxjhwbb 12个月前 (10-22) 342℃ 0评论 有些时候我们需要查找一些最近修改过的文件,比如改着改着忘了自己改过什么= = ...
- PHP调用java的class
PHP调用java的class 转:http://hi.baidu.com/lei0827/blog/item/28439a4e923234ced1c86a18.html PHP调用java的cl ...