我怎样才能让按钮盒连接起来？

Question

我正在尝试使用 HTML、CSS 和 Javascript 制作一个计算器。这只是原始的 CSS 和 HTML。自从我使用了 flex grow，请问如何让按钮的所有边框相交。

编辑：我很抱歉旧的密码笔 link，这是新的并且可以使用 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>&#8592;</button>
                <button>&divide;</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 在我的代码笔中 link。

Answer 1

如果您将 font-size 0 赋予您的父元素，它应该移除按钮之间的白色 space，这会导致按钮之间出现额外的 space。

将以下内容添加到您的 css：

.buttons{
    font-size: 0;
}

Answer 2

您的代码笔 link 不工作。但是，一种可能的解决方案是为行设置宽度，并向每行的最后一个按钮添加 flex-grow 属性：

<style>
    .rows{
        display: flex;
        width: 100px;
    }
    .rows button:last-of-type{
        flex-grow: 1;
    }
</style>

Answer 3

我建议您使用网格而不是 flexbox，它非常适合您的情况。

.rows {
display:grid;
grid-template-columns: repeat(4,1fr) 
}

.clear {
grid-column: 1/3
}

.zero {
grid-column: 1/4
}

您可以在此处阅读有关 css 网格的更多信息： CSS GRID

我怎样才能让按钮盒连接起来？

How can I make the button boxes connect?

html

css

calculator

button

flexbox