我正在处理计算器布局，但布局有一个小问题。计算器右侧，计算器边缘的黑色间距略有偏差。我一直在努力想办法解决这个问题，并希望我能得到一些帮助。我已将链接附加到代码笔以供您查看。
Click here to go to my 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;
最佳答案
@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 存在 margin 问题 *.button-container .buttonE *
关于html - CSS 布局问题。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44031247/