[ad_1]
目前,我正在尝试制作一个能够进行大量计算的计算器应用程序。 然而,我制作的按钮(尚未运行,因此无需担心 JavaScript)彼此之间都有间隙。 自己运行我的 HTML 和 CSS 来发现这个问题可能会更容易,但是 CSS 网格导致我的按钮之间存在很大的间隙。
问题:如何修复 CSS 网格以使按钮之间没有太大间隙?
它应该是什么样子:您以前可能见过计算器,所有按钮都应该并排放置,中间没有任何间隙(至少,不是很大)。
超文本标记语言
<!DOCTYPE html> <html lang="en"> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport", content="width=device-width, initial-scale=1.0"> <meta name="author" content="nuh uh"> <link rel="stylesheet" href="styles.css"> <title>Calculator App</title> </head> <body> <div id="calculator-grid"> <div id="output"> <div id="previous-operand"></div> <div id="current-operand"></div> </div> <button class="buttons2">Clear All</button> <button class="buttons2">Delete</button> <button class="buttons">/</button> <button class="buttons">1</button> <button class="buttons">2</button> <button class="buttons">3</button> <button class="buttons">*</button> <button class="buttons">4</button> <button class="buttons">5</button> <button class="buttons">6</button> <button class="buttons">+</button> <button class="buttons">7</button> <button class="buttons">8</button> <button class="buttons">9</button> <button class="buttons">.</button> <button class="buttons">0</button> <button class="buttons">x<sup>y</sup></button> <button class="buttons"><sup><sup>y</sup></sup>√x</button> <button class="buttons">log<sub>x</sub>(y)</button> <button class="buttons">Mod</button> <button class="buttons">(</button> <button class="buttons">)</button> <button class="buttons">e</button> <button class="buttons">Sin</button> <button class="buttons">Cos</button> <button class="buttons">Tan</button> <button class="buttons">π</button> <button class="buttons">Csc</button> <button class="buttons">Sec</button> <button class="buttons">Cot</button> <button class="buttons">i</button> <button class="buttons">Sin<sup>-1</sup></button> <button class="buttons">Cos<sup>-1</sup></button> <button class="buttons">Tan<sup>-1</sup></button> <button class="buttons">φ</button> <button class="buttons">Csc<sup>-1</sup></button> <button class="buttons">Sec<sup>-1</sup></button> <button class="buttons">Cot<sup>-1</sup></button> <button class="buttons">></button> <button class="buttons">Sinh</button> <button class="buttons">Cosh</button> <button class="buttons">Tanh</button> <button class="buttons"><</button> <button class="buttons">Csch</button> <button class="buttons">Sech</button> <button class="buttons">Coth</button> <button class="buttons">≥</button> <button class="buttons">Sinh<sup>-1</sup></button> <button class="buttons">Cosh<sup>-1</sup></button> <button class="buttons">Tanh<sup>-1</sup></button> <button class="buttons"><</button> <button class="buttons">Csch<sup>-1</sup></button> <button class="buttons">Sech<sup>-1</sup></button> <button class="buttons">Coth<sup>-1</sup></button> <button class="buttons">EE</button> <button class="buttons">Rad</button> <button class="buttons">Deg</button> <button class="buttons2">=</button> </div> </body> </html>
CSS
*, *::before, *::after { box-sizing: border-box; font-family: Gotham Rounded, sans-serif; font-weight: 400; } body { padding: 0; margin: 0; background: linear-gradient(to right, #00fffb, #25ff29); } #calculator-grid { display: grid; justify-content: center; align-content: center; min-height: 100vh; grid-template-columns: repeat(4, 100px); grid-template-rows: minmax(120px, auto) repeat(17, 100px); } #calculator-grid > button { cursor: pointer; border: 1px solid black; outline: none; } #calculator-grid > button:hover { background-color: rgb(191, 183, 183, .9); } .buttons { height: 50px; width: 75px; font-size: 14pt; background-color: rgb(227, 197, 197); } .buttons2 { height: 50px; width: 100px; font-size: 16pt; font-weight: 600; } #myConsole { background-color: black; color: white; min-height: 100px; }
我尝试过的:
我尝试去掉网格(或其中的一部分),但它不起作用。 我不太确定还能做什么。
解决方案1
干得好:
CSS
*, *::before, *::after { box-sizing: border-box; font-family: Gotham Rounded, sans-serif; font-weight: 400; font-size: 16px; } body { padding: 0; margin: 0; background: linear-gradient(to right, #00fffb, #25ff29); } #calculator-grid { --_button-width: 70px; --_gap-size: 8px; display: grid; justify-content: center; align-content: center; gap: var(--_gap-size); grid-template-columns: repeat(4, var(--_button-width)); grid-template-rows: repeat(16, 1fr); width: fit-content; margin-inline: auto; margin-block: 2rem; } #calculator-grid > button { cursor: pointer; border: 1px solid black; outline: none; font-size: 14pt; } #calculator-grid > button:hover { background-color: rgb(191, 183, 183, .9); } #output { grid-column: 1 / -1; /* all columns */ grid-row: 1 / 2; /* top row */ height: 50px; background-color: red; } .buttons { background-color: rgb(227, 197, 197); } .buttons2 { width: calc((var(--_button-width) * 3 + var(--_gap-size)) / 2); font-weight: 600; background-color: green; } #calculator-grid button:nth-of-type(1) { grid-column: 1 / 2; /* first 2 columns */ justify-self: start; } #calculator-grid button:nth-of-type(2) { grid-column: 2 / 4; /* first 3 & 4 columns */ justify-self: end; } #calculator-grid button:last-of-type { grid-column: 3 / 5; /* last 2 columns */ justify-self: stretch; width: auto; } .myConsole { background-color: black; color: white; min-height: 100px; }
我已经删除了固定尺寸并允许 grid
设置尺寸。
笔记:
* 元素通过使用来定位 grid
句法。
* 按钮将适合网格单元。
* 对于输出,我将其设置为顶行。
* 前 2 个超大按钮我设置为 3 个单元格中的 1.5 个(包括间隙),使用 calc(..)
。 所以如果你改变 --_button-width
或者 --_gap-size
变量,按钮将完美调整大小
* 最后,为了美观,我将最后一个按钮设置为适合 2 个单元格。 不需要计算,只需告诉它拉伸以适应即可。
[ad_2]
コメント