如何使按钮和文字排在一行且对齐（CSS之display：inline-block的妙用）

我们在开发页面的时候添加"按钮"是必不可少的，而一个按钮旁边往往不一定都是另一个按钮，还可能是一串文字。完成这一简单的效果却要思考很多问题。

 

1. 按钮和文字排在一行的解决方案

2. 按钮中文字与外边文字底部自动对齐的解决方案

 

 

对于问题1，我们通常选择的方法是将button 和文字分别置于一个<span>中。因为<span>在未设置 display:block的时候是不会想div那样自动换行的，因此button和文字很自然就排成一行了， 而且两个span中的文字会自动对齐。代码如下：

<style type="text/css">

  .long-btn {
    height: 40px;
    width: 100px;
    text-align:center;
    line-height:40px;

    background: url(img/mail-tpl-view.gif) no-repeat;
    font-size:20px;
  }
</style>

<div>
    <span class="button-span">
       <a class="long-btn" href="##">大按钮</a>
    </span>
    <span class="text">
       小文字
    </span>
  </div>

 

 

      但是如果我们仅仅进行至此，打开页面看效果的时候你会发现，你的按钮显示的是不完全的，不管你把那个height和width设置的多么的大。因为此时span的大小是以它所承载的element的大小决定的，也就是那个<a>，而<a>也没什么出息，它的大小也只取齐于它里面的内容。从这里开始，就分支出来了两种解决方案。

• 第一种，费力不讨好草根型：

      我们为了迎合那个大按钮，就把<a>的css属性display设置为block。这样<a>就已块状形式存在，它的width和height属性就生效了，按钮也出来。刷新页面在看，发现杯具了，原来排在一行的按钮和文字换了行了。。。这全都是block捣的鬼，然后就为了还原之前的一行，我们再给<a>加一个float：left属性，这下以为万事大吉了，一看，一行是一行了，但是文字无法对齐。然后就要开始了炼狱般的各种样式调整，什么margin，什么padding，什么top全都用上了，到最后你可能都无法把两串文字完全搞对齐。。。

 

• 第二种，一劳永逸豪华型：

      说它是豪华型的解决方案，是因为这个里面用到的display:block-inline属性是firefox3时才支持的。在firefox2里面需要用私有属性，但是IE6及以上版本还是都支持的，虽然显示出来有小小不同，这个容后再说。我们之前为了让a能够显示出整个背景，把它设成了block，但是因此而带来来换行的悲惨效果，于是，另一种display属性华丽登场inline-block。你可以把这个属性理解为block和inline的结合，设置此属性的元素既能实现块状元素的一些特性，又能保证同级元素都处于一行，且对齐。

     但是block-inline在各个浏览器中的显示效果还是有些微的差异，这里转一篇文章，供自己收藏供大家参考。

       http://www.99css.com/?p=23