我最近开始编码,我想用JavaScript编写一个计算器。我开始编写HTML / CSS,但是div出现问题,无法将它们移到另一个div中。
这是我的HTML:
.calc {
margin-left: auto;
margin-right: auto;
position: absolute;
right: 0;
left: 0;
top: 100px;
width: 300px;
height: 250px;
border: 2px solid black;
}
.title {
height: 20px;
}
<link href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css" rel="stylesheet">
<div class=calc>
<div class=title>Kalkulator</div>
<div><input id="result" type="number"></div>
<div><button class=btn-plus>+</button></div>
<div><button class=btn-minus>-</button></div>
<div><button class=btn-multi>*</button></div>
<div><button cass=btn-div>/</button></div>
</div>
我想更改按钮和输入的位置,并且想扩大标题。我无法更改其大小,也无法移动它。
答案 0 :(得分:0)
没有更多信息,很难说您要做什么。
要自信地回答您的一个问题:您可以使用font-size
更改标题的大小。
我还将按钮的所有类更改为btn
并添加了float: left;
.calc {
margin-left: auto;
margin-right: auto;
position: absolute;
right: 0;
left: 0;
top: 100px;
width: 300px;
height: 250px;
border: 2px solid black;
}
.title {
font-size: 20px;
}
.btn {
float: left;
}
<link href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css" rel="stylesheet">
<div class="calc">
<div class="title">Kalkulator</div>
<div><input id="result" type="number"></div>
<div><button class="btn">+</button></div>
<div><button class="btn">-</button></div>
<div><button class="btn">*</button></div>
<div><button cass="btn">/</button></div>
</div>
答案 1 :(得分:0)
您已经错过了课堂上的引号。
因此,content_depart[0].dept_name
应该看起来像这样:<div class=calc>
我将按钮<div class="calc">
下的按钮移到了一行,并更正了<div>
每个项目的设置。
class
如果要放大字体,请设置<div class="calc">
<div class="title">Kalkulator</div>
<div><input id="result" type="number"></div>
<div>
<button class="btn-plus">+</button>
<button class="btn-minus">-</button>
<button class="btn-multi">*</button>
<button class="btn-div">/</button>
</div>
答案 2 :(得分:0)
您可能值得看一下display
property的功能以及<span>
和<div>
之间的区别。那里有大量的资源。
请参阅此pen for a working example。
CSS:
.calc {
margin-left: auto;
margin-right: auto;
position: absolute;
right: 0;
left: 0;
top: 100px;
width: 300px;
height: 250px;
border: 2px solid black;
}
.title {
height: 20px;
}
button {
padding: 10px 15px 10px 15px; // top right bottom left
}
.title,
.result {
display: block;
width: 100%;
margin-bottom: 10px;
}
.calc div {
display: inline-block;
}
HTML:
<link href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css" rel="stylesheet">
<div class="calc">
<div class="title">Kalkulator</div>
<div class="result"><input id="result" type="number" /></div>
<div><button class="btn-plus">+</button></div>
<div><button class="btn-minus">-</button></div>
<div><button class="btn-multi">*</button></div>
<div><button class="btn-div">/</button></div>
</div>
继续学习!到目前为止,您做得不错!