仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 846|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来讲讲:inline-block元素间距怎样往撤除?

[复制链接]
精灵巫婆 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 22:53:59 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
提高易用性。使用CSS可以结构化HTML,例如:标签只用来控制段落,heading标签只用来控制标题,table标签只用来表现格式化的数据等等。
破洛洛文章简介:往除inline-block元素间间距的N种办法。
1、征象形貌

真正意义上的inline-block程度出现的元素间,换行显现或空格分开的情形下会有间距,很复杂的个例子:
  1. <input/><inputtype="submit"/>
复制代码
间距就来了~~

我们利用CSS变动非inline-block程度元素为inline-block程度,也会有该成绩:
  1. .spacea{display:inline-block;padding:.5em1em;background-color:#cad5eb;}
复制代码
  1. <divclass="space"><ahref="##">难过</a><ahref="##">淡定</a><ahref="##">热血</a></div>
复制代码

您能够狠狠地址击这里:inline-block元素间间距demo
这类体现是切合标准的应当有的体现(假如有人以为是bug就太()ay()oy了)。
不外,这类间距偶然会对我们结构,或是兼容性处置发生影响,必要往失落它,该怎样办呢?以下展现N种办法(接待增补)!
2、办法之移除空格

元素间留白间距呈现的缘故原由就是标签段之间的空格,因而,往失落HTML中的空格,天然间距就木有了。思索到代码可读性,明显连成一行的写法是不成取的,我们能够:
  1. <divclass="space"><ahref="##">难过</a><ahref="##">淡定</a><ahref="##">热血</a></div>
复制代码
大概是:
  1. <divclass="space"><ahref="##">难过</a><ahref="##">淡定</a><ahref="##">热血</a></div>
复制代码
大概是借助HTML正文:
  1. <divclass="space"><ahref="##">难过</a><!----><ahref="##">淡定</a><!----><ahref="##">热血</a></div>
复制代码
等。
3、利用margin负值
  1. .spacea{display:inline-block;margin-right:-3px;}
复制代码
margin负值的巨细与高低文的字体和笔墨巨细相干,个中,间距对应巨细值能够拜见我之前“基于display:inline-block的列表结构”一文part6的统计表格:

比方,关于12像素巨细的高低文,Arial字体的margin负值为-3像素,Tahoma和Verdana就是-4像素,而Geneva为-6像素。
因为内部情况的不断定性,和最初一个元素多出的父margin值等成绩,这个办法不合适年夜范围利用。
4、让闭合标签吃胶囊

以下处置:
  1. <divclass="space"><ahref="##">难过<ahref="##">淡定<ahref="##">热血</a></div>
复制代码
注重,为了向下兼容IE6/IE7等喝蒙牛长年夜的扫瞄器,最初一个列表的标签的停止(闭合)标签不克不及丢。
在HTML5中,我们间接:
  1. <divclass="space"><ahref="##">难过<ahref="##">淡定<ahref="##">热血</div>
复制代码
好吧,固然感到上有点怪怪的,可是,这是OK的。
您能够狠狠地址击这里:无闭合标签往除inline-block元素间距demo

5、利用font-size:0

相似上面的代码:
  1. .space{font-size:0;}.spacea{font-size:12px;}
复制代码
这个办法,基础上能够办理年夜部分扫瞄器下inline-block元素之间的间距(IE7等扫瞄器偶然候会有1像素的间距)。不外有个扫瞄器,就是Chrome,其默许有最小字体巨细限定,由于,思索到兼容性,我们还必要增加:
相似上面的代码:
  1. .spacea{display:inline-block;padding:.5em1em;background-color:#cad5eb;}0
复制代码
您能够狠狠地址击这里(客岁制造的一个复杂demo):font-size:0扫除换行符间隙demo
增补:依据小杜在批评中中的说法,今朝Chrome扫瞄器已作废了最小字体限定。因而,下面的-webkit-text-size-adjust:none;代码估量光阴未几了。
6、利用letter-spacing

相似上面的代码:
  1. .spacea{display:inline-block;padding:.5em1em;background-color:#cad5eb;}1
复制代码
依据我客岁的测试,该办法能够弄定基础上一切扫瞄器,包含吃“东鞋”、“西毒(胶囊)”、“南地(沟油)”、“北钙(三鹿)”的IE6/IE7扫瞄器,不外Opera扫瞄器下有蛋疼的成绩:最小间距1像素,然后,letter-spacing再小就复原了。
7、利用word-spacing

相似上面代码:
  1. .spacea{display:inline-block;padding:.5em1em;background-color:#cad5eb;}2
复制代码
一个是字符间距(letter-spacing)一个是单词间距(word-spacing),迥然不同。据我测试,word-spacing的负值只需年夜到必定水平,其兼容性上的差别就能够被疏忽。由于,貌似,word-spacing即便负值很年夜,也不会产生堆叠。
您能够狠狠地址击这里:word-spacing与元素间距往除demo
与下面demo一样的效果,这里就不截图展现了。假如您利用Chrome扫瞄器,大概看到的是间距仍旧存在。的确是有该成绩,缘故原由我是不分明,不外我晓得,能够增加display:table;或display:inline-table;让Chrome扫瞄器也变得灵巧。
  1. .spacea{display:inline-block;padding:.5em1em;background-color:#cad5eb;}3
复制代码
8、其他制品办法

上面展现的是YUI3CSSGrids利用letter-spacing和word-spacing往除格栅单位见距离办法(注重,其针对的是block程度的元素,因而对IE8-扫瞄器做了hack处置):
  1. .spacea{display:inline-block;padding:.5em1em;background-color:#cad5eb;}4
复制代码
以下是一个名叫RayM的人供应的办法:
  1. .spacea{display:inline-block;padding:.5em1em;background-color:#cad5eb;}5
复制代码
也就是下面一系列CSS办法的组组合合。
9、结语

其他往除间距的办法一定另有,接待人人经由过程批评体例举行增补。上文部分办法大概有测试不全面的地方,因而,部分细节上大概会有忽略,接待斧正。
参考文章:FightingtheSpaceBetweenInlineBlockElements
</p>
缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
变相怪杰 该用户已被删除
沙发
发表于 2015-1-17 19:44:32 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
山那边是海 该用户已被删除
板凳
发表于 2015-1-24 14:26:20 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
若天明 该用户已被删除
地板
发表于 2015-2-1 17:26:07 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
谁可相欹 该用户已被删除
5#
发表于 2015-2-7 13:58:54 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
透明 该用户已被删除
6#
发表于 2015-2-22 18:36:37 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
爱飞 该用户已被删除
7#
发表于 2015-3-7 03:47:40 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
深爱那片海 该用户已被删除
8#
发表于 2015-3-14 11:59:09 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
飘灵儿 该用户已被删除
9#
发表于 2015-3-21 07:27:42 | 只看该作者
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-11-16 15:18

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表