日期:2014-05-17 浏览次数:20780 次
我们在开发页面的时候添加"按钮"是必不可少的,而一个按钮旁边往往不一定都是另一个按钮,还可能是一串文字。完成这一简单的效果却要思考很多问题。
?
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
?
?
?
?
?