display:inline-block之用法

display:inline-block之用法

Sosow 2012-09-07 00:12:50

HTML的元素有多种display属性，比较常见的有display:none; display:block; display:inline和display:inline-block;等。详细可参阅W3Schools文档。

有些HTML元素自然地带有display:block;样式属性，比如
<div>
<h1>...<h6>
<p>
<ul>,<ol>,<dl>
<li>,<dt>,<dd>
<table>
<pre>
等元素，其显示为block样式，会将一行中其可用的空间给跨越占据，容不下另一个元素与其同行。

有些HTML元素则是自然带有display:inline;样式属性，这也是元素默认的样式，比如
<span>
<a>
<strong>
<em>
<img>
<br>
等元素，其不会打断文档排布流，会在一行中一个挨一个地排列。

当想要做一个水平的列表时，一种方式是使用float来实现，但得容忍其缺点；另一种方式是使用display:inline-block;来实现。现在转入正题了。

用float方式会带来的麻烦：
使用float方式需要注意的是，要有一个元素来包裹float元素，同时避免接下来的元素紧紧地靠近它。另外一个麻烦是，当有一个多行水平列表，但是列表里的内容有不同的高度时，就会排的非常痛苦。

用display:inline-block;方式：
display:inline-block;方式样式化列表时，既可使得列表元素能按行挨个排列，同时元素还能保持其块属性，比如高和宽、上下边距等。但是对有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。