admin 管理员组文章数量: 887021
inline
display: inline-block; 这个东西困扰了我好久。不知道反正我在中文网站上没有找到让我一下子醒悟过来的解释。偶然间读到这篇英文，我觉得简短的几句话，把问题解释的很清楚。 就像我开始的时候不明白clear：both，但是有人告诉我说是“清除浮动造成的影响”一样， 一下子就幡然醒悟了。
原文：/
如果你已经使用CSS做过一段时间的开发，相信你对display: inline-block一定不陌生．它最主要的用在IE6中消除float元素的双边距。简单的解释一下，如果你给一个浮动元素与之浮动的方向相同的方向一个margin, 则这个元素的边距会加倍。如果你对这个bug很熟悉，你可以有两种方法消除它， 一是通过hack只给一半的margin, 二是给这个元素display: inline-block; display: inline。 当然如果你对inline-break足够的理解， 除了这个用处以外，它还可以用在很多场合。
怎么给inline-break下一个定义呢？看看别人怎么说：
According to Sitepoint’s CSS Reference:
inline-break 使该元素产生一个展示出来像inline一样的block box.(有点晕)
According to QuirksMode:
inline-block 像inline一样放置(比如和它相邻的元素处在同一行)，像block一样表现。
According to Robert Nyman:
通常来说，inline-break是inline元素，但是保留了block的一些特性，比如，可以设置高宽内外边距等。
我个人认为Robert Nyman的解释最好，因为它更具有实践意义。
你可以尝试一下这段代码，
<span>This is a span here<span style="display: inline-block; border: solid red 1px; height: 70px; ">This is a<br />inline-block<br />element</span> This is a span here.</span>
效果：
什么场景下是用inline-block?
- 修正ie6中浮动元素的双边距问题；
- 水平放置多个类似block的元素而不需要用float;
- 使一个inline元素具有高宽边距等而它依然能够保持inline;
需要注意的问题
inline-block一些很重要的因素和缺点需要牢记在心。inline-block对相邻的空格敏感，所以如果你要使用inline-block水平排列一些元素，比如一个导航条，你需要想办法不让这种事情发生。 办法一：像这样书写li:
<ul>
<li>Item One</li><li>Item Two</li><li>Item Three</li><li>Item Four</li><li>Item Five</li>
</ul>
办法二：ul的font-size=0。
如果你一排放置多个高度不一的inline-block元素，你需要通过vertical-align来设置他们的垂直对齐方式。
是否跨浏览器？
inline-block可以在除了ie6/7以外的所有浏览器上工作的很好。但是针对ie6/7可以通过这种方式hack:
{
display: inline-block;
*display: inline-block;
zoom: 1;
}
我的一些实践：
<ul class="u1">
<li>
<h4>This is the title</h4>
<img src="mm1.jpg" />
</li>
<li>
<h4>This is the title</h4>
<img src="mm2.jpg" />
</li>
<li>
<h4>This is the title</h4>
<img src="mm3.jpg" />
</li><li>
<h4>This is the title</h4>
<img src="mm4.jpg" />
</li><li>
<h4>This is the title</h4>
<img src="mm5.jpg" />
</li><li>
<h4>This is the title</h4>
<img src="mm6.jpg" />
</li><li>
<h4>This is the title</h4>
<img src="mm7.jpg" />
</li><li>
<h4>This is the title</h4>
<img src="mm8.jpg" />
</li><li>
<h4>This is the title</h4>
<img src="mm9.jpg" />
</li><li>
<h4>This is the title</h4>
<img src="mm10.jpg" />
</li>
</ul>
.u1{
list-style: none;
}
.u1 li{
display: inline-block;
width: 150px;
vertical-align: top;
}
本文标签： inline
版权声明：本文标题：inline 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1688213092h192785.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论