CSS布局问题。

Question

我正在研究计算器布局，但布局有一个小问题。 在计算器的右侧，计算器边缘的黑色间距略微偏离。 我一直在努力寻找解决方案的方法，并希望能对此有所帮助。 我已将链接附加到代码笔上，以供您查看。

单击此处转到我的Codepen

我的CSS代码如下：

.button-container > a {
width: 50px;
height: 50px;
float: left;
margin: 0 auto;
padding: 0;
display: inline-block;
line-height: 50px;
text-align: center;
color: white;
font-family: 'Roboto', serif;
background: #333333;   
margin: 1px;
text-decoration: none;

Answer 1

@import url('https://fonts.googleapis.com/css?family=Merriweather:700|Roboto');
.button-container {
    width: 209px;
    height: 255px;
    background: #1a1a1a;
    border-bottom-left-radius: .5em;
    border-bottom-right-radius: .5em; 

}

.button-container > a {
    width: 51px;
    height: 50px;
    float: left;
    margin: 0 auto;
    padding: 0;
    display: inline-block;
    line-height: 50px;
    text-align: center;
    color: white;
    font-family: 'Roboto', serif;
    background: #333333;   
    margin: 1px 0px 0px 1px;
    text-decoration: none;
}

.calc-container{
height: 129px;
width: 209px;
background: black;
padding: 8em 0em ;
border-radius: .5em;  
}

body {
background: #25383C;
margin: 10em 0 10em 40em;
}

.button-container .buttonE {

  width: 51px;
    height: 100px;
    float: right; 
    margin: 0 auto ;
    padding: 0px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-family: 'Roboto', serif;
    background: #333333;   
    margin: 1px;
    text-decoration: none;
    border-bottom-right-radius: .5em; 

}

.button-container .button0 {

  width: 155px;
    height: 48px;
    float: left; 
    line-height: 50px;
    text-align: center;
    color: white;
    font-family: 'Roboto', serif;
    background: #333333;   
    margin: 1px 0px 0px 1px;
    text-decoration: none;
    border-bottom-left-radius: .5em; 
}
#blue {
  color: #008b8b;
}

请使用上面的CSS出现保证金问题* .button-container .buttonE *