前天在给豆豆调试东西的时候碰到的一个问题。在之前的一篇日志–“同一行中的左右两侧文字该怎么定位”里，我提到过一种方法，现在再来回顾下：
<!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=gb2312" />
<title>无标题文档</title>
<style>
h2 { background:#FFECC8; font-size:12px;}
h2 span { float:right;}
</style>
</head>
<body>
<h2><span>我在右边</span> 我在左边</h2>
</body>
</html>
这样子可以实现如下图所示的效果：
这时，我们给 h2 添加一个 CSS 属性：text-indent，看看会发生什么情况：
h2 { background:#FFECC8; font-size:12px; text-indent:2em;}
首先看下 IE 7 下的显示：
继续阅读 »
原文地址：Let’s All Get Inline (In a Block, In a Block)
文章概要：display:inline-block 是一个经常用到的属性，它的意思就是将对象呈现为内联对象，然后对象的内容作为块对象。使用它我们可以轻松的使用 text-align 来将这些元素居中，如果使用 float，我们还不能很好的控制他们居中，因为毕竟我们还没有 float:center。但是这个属性在 ie8 以下和 Firefox 2 中却没有得到支持，Firefox 有一个类似的私有属性（-moz-inline-box）能够产生类似的效果，但是它却能带来一些 bug。
首先我们在支持 display:inline-block 的浏览器中（Opera、Safari、Firefox 3、IE 8）运行以下代码，看看会是什么样的效果？
HTML代码：
<div class="cols">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc commodo lorem ut justo.</p>
<p>Ut molestie libero quis massa elementum tristique. Aliquam erat volutpat.</p>
<p class="last">Duis purus diam, gravida et, mattis eget, semper ac, tellus. Suspendisse velit nunc, varius ut, pharetra malesuada, suscipit ut, lacus.</p>
</div>
CSS 代码：
.cols{
width:44em;
margin :auto;
text-align:center;/* centers inline-blocks*/
border:1px solid #000;
padding:10px;
}
.cols p {
display:inline-block;/* FF3, Opera, Safari */
width:12em;
margin:0 1em 0 0;/* need to remove top and bottom margin from p element*/
padding:0.5em;
border:1px solid #009;
vertical-align:bottom;/* align to bottom */
background:#f00;
}
.cols p.last{margin:0}/* remove right margin from last element so that they are all centered*/
我们可以看到如下图所示的效果：
那么，现在我们添加 Firefox 的私有属性后，在 Firefox 2 浏览器下看看是什么效果？
继续阅读 »
