无法在其他div内移动div

时间:2019-04-12 13:20:58

标签: html css

我最近开始编码,我想用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>

我想更改按钮和输入的位置,并且想扩大标题。我无法更改其大小,也无法移动它。

3 个答案:

答案 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>

继续学习!到目前为止,您做得不错!