Question

在页面中怎样把按钮和标签放在同一行？

Answer 1

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

我们为了迎合那个大按钮，就把的css属性display设置为block。这样就已块状形式存在，它的width和height属性就生效了，按钮也出来。刷新页面在看，发现杯具了，原来排在一行的按钮和文字换了行了。

这全都是block捣的鬼，然后就为了还原之前的一行，我们再给加一个float：left属性，这下以为万事大吉了，一看，一行是一行了，但是文字无法对齐。

然后就要开始了炼狱般的各种样式调整，什么margin，什么padding，什么top全都用上了，到最后你可能都无法把两串文字完全搞对齐。

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

它是豪华型的解决方案，是因为这个里面用到的display:block-inline属性是firefox3时才支持的。

在firefox2里面需要用私有属性，但是IE6及以上版本还是都支持的，虽然显示出来有小小不同，这个容后再说。

我们之前为了让a能够显示出整个背景，把它设成了block，但是因此而带来来换行的悲惨效果，于是，另一种display属性华丽登场inline-block。

你可以把这个属性理解为block和inline的结合，设置此属性的元素既能实现块状元素的一些特性，又能保证同级元素都处于一行，且对齐。