如何使按钮框连接？答案

【问题标题】：How can I make the button boxes connect?如何使按钮框连接？
【发布时间】：2020-06-11 21:36:06
【问题描述】：

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

编辑：我很抱歉旧的代码笔链接，这是新的和有效的 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 在我的代码笔链接中。

【问题讨论】：

您提供的codepen不可用
你的 CSS 在哪里？
我刚刚编辑了这个问题。谢谢。

标签： html css button flexbox calculator

【解决方案1】：

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

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

.clear {
grid-column: 1/3
}

.zero {
grid-column: 1/4
}

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

【讨论】：

【解决方案2】：

如果您将font-size 0 分配给您的父元素，它应该会删除按钮之间的空白，这会导致它们之间产生额外的空间。

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

.buttons{
    font-size: 0;
}

【讨论】：

【解决方案3】：

您的 codepen 链接无效。但是，一种可能的解决方案是为您的行设置宽度，并将 flex-grow 属性添加到每行的最后一个按钮：

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

【讨论】：