关于inline-block布局需要注意几点事项
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于inline-block布局需要注意几点事项相关的知识，希望对你有一定的参考价值。
之前在网上看到一个关于CSS基本布局的一个教学网站，内容很简洁，http://learnlayout.com/。有一小节是讲关于inline-block布局需要注意的几点事项，引用之。
Inline-block : Few things that you need keep in mind
You can also use inline-block for layouts. There are a few things to keep in mind:
•inline-block elements are affected by the vertical-align property, which you probably want set to top
•You need to set the width of each column
•There will be a gap between the columns if there is any whitespace between them in the html
翻译过来就是我们使用inline-block元素进行网页布局的时候，需要注意几点
1.inline-block元素受vertical-align属性影响，你可能需要设置成vertical-align: top。
2.我们需要设置inline-block元素的宽度。//因为inline-block元素具有收缩性（引用张鑫旭DN的形容，比较形象化），同float，绝对定位元素表现相似（这里不谈这两者是脱离文档流），收缩性的表现是元素不设置宽度，宽度由内容区决定（content area）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>"收缩性"属性</title> <style> .test{ background-color: orange; /*position: absolute;*/ /*float: left;*/ /*display: inline-block;*/ } </style> </head> <body> <div class="test">Lorem ipsum dolor sit amet</div> </body> </html>
3.我们使用inline-block元素布局还有一点要注意的就是元素间可能出现一个空格大小的间隙，这个间隙是由于html源代码中，换行符/空格 导致的，解决方法有很多，我一般是在inline-block元素之间加HTML注释。假设下面li的display设置为inline-block。为消除间隙，我在li标签之间使用了注释符，当然这种方法会使代码变得冗长。
<ul>
<li></li><!--
--><li></li><!--
--><li></li>
</ul>
原文短短的三点，其实每一点都可以延伸出太多，第二点受vertical-align的影响（所有inline,inline-block元素都受到vertical-align的影响），更是会造成一些匪夷所思的问题，参考张鑫旭博客http://www.zhangxinxu.com/wordpress/?p=4925
以上是关于关于inline-block布局需要注意几点事项的主要内容，如果未能解决你的问题，请参考以下文章