当前位置: 代码迷 >> HTML/CSS >> 怎么使按钮和文字排在一行且对齐(CSS之display:inline-block的妙用)
  详细解决方案

怎么使按钮和文字排在一行且对齐(CSS之display:inline-block的妙用)

热度:573   发布时间:2012-11-08 08:48:11.0
如何使按钮和文字排在一行且对齐(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

?

?

?

?

?

  相关解决方案