怎样才能使按钮盒连接起来？
怎样才能使按钮盒连接起来？
提问于 2020-02-27 19:37:02
我试图用HTML，CSS和Javascript制作一个计算器。这只是原始的CSS和HTML。请让我如何使所有的边界按钮满足，因为我使用flex增长。
编辑：--很抱歉，旧的代码笔链接，这是新的和正在工作的https://codepen.io/philippaolomoro/pen/abOwoNd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Calculator using flex</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<section class="screen-container">
<div class="screen-input">
0
</div>
</section>
<section class="buttons">
<div class="rows row1">
<button class="clear">C</button>
<button>←</button>
<button>÷</button>
</div>
<div class="rows row2">
<button>7</button>
<button>8</button>
<button>9</button>
<button>x</button>
</div>
<div class="rows row3">
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
</div>
<div class="rows row4">
<button>1</button>
<button>2</button>
<button>3</button>
<button>+</button>
</div>
<div class="rows row5">
<button class="zero">0</button>
<button>=</button>
</div>
</section>
</div>
</body>
</html>编辑: CSS在我的代码笔链接中。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-02-29 09:59:16
我建议您使用网格，而不是柔性盒，这对您的情况是完美的。
.rows {
display:grid;
grid-template-columns: repeat(4,1fr)
}
.clear {
grid-column: 1/3
}
.zero {
grid-column: 1/4
}您可以在这里阅读更多关于css网格的内容：CSS网格。
Stack Overflow用户
发布于 2020-02-27 19:47:46
如果将font-size 0给父元素，它应该删除按钮之间的空格，这会导致它们之间的额外空间。
在css中添加以下内容：
.buttons{
font-size: 0;
}Stack Overflow用户
发布于 2020-02-27 20:35:06
您的代码链接不起作用。然而，一个可能的解决方案是为您的行设置一个宽度，并在每一行的最后一个按钮中添加一个flex属性：
<style>
.rows{
display: flex;
width: 100px;
}
.rows button:last-of-type{
flex-grow: 1;
}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60440580
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号