如何使按钮和⽂字排在⼀⾏且对齐（CSS之display：inline-
block的妙⽤）
cssclass属性我们在开发页⾯的时候添加"按钮"是必不可少的，⽽⼀个按钮旁边往往不⼀定都是另⼀个按钮，还可能是⼀串⽂字。完成这⼀简单的效果却要思考很多问题。
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在各个浏览器中的显⽰效果还是有些微的差异，这⾥转⼀篇⽂章，供⾃⼰收藏供⼤家参考。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。