我怎樣才能使按鈕盒連接？
[英]How can I make the button boxes connect?
問題描述
我正在嘗試使用 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 個解決方案
解決方案1
1 已采納 2020-02-29 09:59:16
我建議您使用網格而不是 flexbox，它非常適合您的情況。
.rows {
display:grid;
grid-template-columns: repeat(4,1fr)
}
.clear {
grid-column: 1/3
}
.zero {
grid-column: 1/4
}
您可以在此處閱讀有關 css 網格的更多信息： CSS GRID
解決方案2
0 2020-02-27 19:47:46
如果您為父元素提供font-size 0 ，它應該刪除按鈕之間的空白，這會導致它們之間產生額外的空間。
將以下內容添加到您的 css 中：
.buttons{
font-size: 0;
}
解決方案3
0 2020-02-27 20:35:06
您的 codepen 鏈接無效。 但是，一種可能的解決方案是為您的行設置寬度並將 flex-grow 屬性添加到每行的最后一個按鈕：
<style>
.rows{
display: flex;
width: 100px;
}
.rows button:last-of-type{
flex-grow: 1;
}
</style>
如何在jquery對話框上動態創建帶有按鈕的輸入框？
[英]How can I make input boxes with button dynamically on jquery dialog box?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.