html - 如何水平对齐元素？

Question

我遇到了一个奇怪的问题

我有类似的东西

<div class='test'>
    <button class='btn'></button>
   <div class='nest'>
      more...
   </div>
</div>

我的CSS

.test{
   z-index: 100;
   position: absolute;
   bottom: 15px;
   left: 1%;
   width: 98%;
   min-width: 500px;
   height: 45px;
   background: url(images/botnav_bg_shim.png) repeat-x;
   border-radius: 3px;
}

.btn{
   margin-left: 2px;
   width: 128px;
   height: 48px; 
   background:url(images/bot.png) no-repeat;
}

.nest{
   display: inline-block;
   margin-left: 10px;
   height: 45px;
   padding-left: 17px; 
   background:url(images/nest.png) no-repeat;
}

我的问题是我的按钮元素将无缘无故地被迫向下移动 50 像素。谁能帮我解决这个问题？非常感谢!

Answer 1

删除或添加注释 block (/* ... */) 到

position: absolute;

在.test 类中