我正在 HTML/CSS 中創建一個基本計算器，而不使用 Bootstrap。將有四列按鈕 - 三列主要用于數字，一列用于操作按鈕（+、- 等）。操作員按鈕列將有五個按鈕，而不是其他容器中的四個按鈕。我希望按鈕 div 彼此完全齊平并與其周圍的容器齊平。但是，我遇到了兩個問題。首先，當我嘗試為每列按鈕提供完全相同的寬度 (25%) 時，最后一列出現在框外。每列之間都有一個空格，我無法去掉它。其次，即使我將盒子的高度設置為其容器高度的百分比，盒子也會垂直移動。我最終會去掉按鈕邊框，但將它們包含在這里是為了更容易地直觀地顯示出了什么問題。html,body { text-align: center; font-family: 'Courier New', Courier, monospace;}.mainBody { display: inline-block; width: 350px; height: 350px;}.outputWindow { width: 100%; height: 20%; border-bottom: 0px; background-color: rgb(164, 174, 177); text-align: right; line-height: 100px;}.buttonsBody { width: 100%; height: 80%; border-top: 0px; background-color: rgb(138, 142, 143);}.numColumn,.operatorColumn { display: inline-block; width: 25%; height: 100%;}.numButton,.operatorButton { line-height: 50px; border: 1px solid black;}.numButton { height: 25%;}.operatorButton { height: 20%;}<html><head> <title>Calculator</title> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="styles.css" /></head>
3 回答
慕哥6287543
TA貢獻1831條經驗 獲得超10個贊
使用如下所示的溢出：隱藏功能
.buttonsBody {
width: 100%;
height: 80%;
border-top: 0px;
background-color: rgb(138, 142, 143);
overflow: hidden;
}該功能將阻止任何內容離開您的父 div，這樣您就可以調整父 div 的大小以適合您需要的內容，并且它將阻止內容出現在外部
嗶嗶one
TA貢獻1854條經驗 獲得超8個贊
你可以使用以下方法。添加你自己的類并根據它編寫css。如果你不想使用bootstrap，你可以使用css grid，這對你來說很容易
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta charset="UTF-8"/>
<style>
html, body {
text-align: center;
font-family: 'Courier New', Courier, monospace;
width:100%;
}
.mainBody {
display: inline-block;
width: auto;
height: auto;
}
.outputWindow {
height: 20%;
border-bottom: 0px;
background-color: rgb(164, 174, 177);
text-align: right;
line-height: 100px;
padding:20px;
}
.buttonsBody {
border-top: 0px;
background-color: rgb(138, 142, 143);
}
.numColumn, .operatorColumn {
display: inline-block;
width: 100%;
height: 100%;
}
.numButton, .operatorButton {
width:20%;
float:left;
line-height: 50px;
margin:10px;
border: 1px solid black;
}
.numButton {
height: 25%;
}
.operatorButton {
height: 25%;
}
</style>
</head>
<body>
<div class="mainBody">
<div class="outputWindow">Test </div>
<div class="buttonsBody">
<div class="numColumn">
<div class="numButton">7</div>
<div class="numButton">8</div>
<div class="numButton">9</div>
<div class="numButton">Del</div>
</div>
<div class="numColumn">
<div class="numButton">4</div>
<div class="numButton">5</div>
<div class="numButton">6</div>
<div class="numButton">÷</div>
</div>
<div class="numColumn">
<div class="numButton">1</div>
<div class="numButton">2</div>
<div class="numButton">3</div>
<div class="numButton">x</div>
</div>
<div class="operatorColumn">
<div class="operatorButton">0</div>
<div class="operatorButton">.</div>
<div class="operatorButton">=</div>
<div class="operatorButton">-</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
- 3 回答
- 0 關注
- 154 瀏覽
添加回答
舉報
0/150
提交
取消