html - 居中和调整大小按钮

Question

#controlpanel .button 
{

    margin: 12px 12px 0px 12px;
     width: 100%;
}

如何使这些按钮填充白框的宽度，但每边都有 12px？填充在内部增加了空间……而边距使它们脱离了白框。

Answer 1

1. 添加填充到#controlpanel
2. 从按钮中删除左右边距

3. 将 box-sizing:border-box 添加到按钮中，您应该得到如下信息：

   #controlpanel{     
       padding:0px 12px 12px 12px;
   }
   
   
   #controlpanel .button {
       margin: 12px 0px 0px 0px;
       width: 100%;
       box-sizing:border-box;
       -o-box-sizing:border-box;
       -moz-box-sizing:border-box;
       -ms-box-sizing:border-box;
   }
   

Answer 2

有两件事可能会有所帮助：

• 使用填充_div#controlpanel
• 删除按钮的边距

此外，您还可以尝试删除 100% 宽度。

Answer 3

问题是width: 100%;. 尝试注释掉该行并键入：display: block;