为什么它将我的段落推入下一个div容器？

Question

嘿，我有段落告诉哪个号码是哪个号码。但每个段落都位于应该命名的方框下方。我真的有点不知道为什么会发生这种情况。

我所说的方框都在div容器“case”中。它们下面应该有一个输入层。预计后来会输入数字。

body {
  background-color: dimgrey;
}
p {
  text-align: center;
  line-height: 100px;
  font-size: 40px;
  width: 100px;
  font-family: Verdana, Geneva, sans-serif;
  margin: 0 0 0 0;
}
input {
  outline: none;
  border: none;
  background-color: transparent;
  text-align: center;
  font-size: 40px;
  width: 100px;
  height: 100px;
  font-family: Verdana, Geneva, sans-serif;
  margin: 0;
}
.id {
  font-size: 20px;
  line-height: 20px;
  text-align: left;
  width: 5px;
  display: block;
}
input:focus {
  background-color: lightblue;
}
#register {
  display: inline-block;
  border: 2px solid black;
  width: 204px;
  margin: 80px;
  background-color: lightgrey;
}
#case {
  display: inline-block;
  border: 2px solid black;
  width: 408px;
  height: 408px;
  margin: 80px 0;
  overflow: hidden;
  background-color: lightgrey;
}
#instructions {
  display: block;
  border: 3px solid black;
  width: 680px;
  height: auto;
  margin: 80px 80px;
  background-color: lightgrey;
  float: right;
  overflow: hidden;
}
#instructions p {
  padding: 0px 0px 10px 10px;
}
#output {
  border: 3px solid black;
  width: 695px;
  margin: 0 0 0 80px;
  background-color: lightgrey;
  overflow: hidden;
}
#output p {
  margin: 0px 20px;
}
.box {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 0;
}
.info {
  text-align: left;
  line-height: inherit;
  width: inherit;
  font-size: 20px;
}
.header {
  text-decoration: underline;
}

<div id="register">
  <div class="box">
    <p>IP</p>
  </div>
  <div id="IP" class="box">
    <p></p>
  </div>

  <div class="box">
    <p>IS</p>
  </div>
  <div id="IS" class="box">
    <p></p>
  </div>

  <div class="box">
    <p>R0</p>
  </div>
  <div id="R0" class="box">
    <p></p>
  </div>

  <div class="box">
    <p>R1</p>
  </div>
  <div id="R1" class="box">
    <p></p>
  </div>
</div>
<div id="case">
  <div id="0" class="box">
    <input></input>
    <p class="id">0</p>
  </div>
  <div id="1" class="box">
    <input></input>
    <p class="id">1</p>
  </div>
  <div id="2" class="box">
    <input></input>
    <p class="id">2</p>
  </div>
  <div id="3" class="box">
    <input></input>
    <p class="id">3</p>
  </div>
  <div id="4" class="box">
    <input></input>
    <p class="id">4</p>
  </div>
  <div id="5" class="box">
    <input></input>
    <p class="id">5</p>
  </div>
  <div id="6" class="box">
    <input></input>
    <p class="id">6</p>
  </div>
  <div id="7" class="box">
    <input></input>
    <p class="id">7</p>
  </div>
  <div id="8" class="box">
    <input></input>
    <p class="id">8</p>
  </div>
  <div id="9" class="box">
    <input></input>
    <p class="id">9</p>
  </div>
  <div id="10" class="box">
    <input></input>
    <p class="id">10</p>
  </div>
  <div id="11" class="box">
    <input></input>
    <p class="id">11</p>
  </div>
  <div id="12" class="box">
    <input></input>
    <p class="id">12</p>
  </div>
  <div id="13" class="box">
    <input></input>
    <p class="id">13</p>
  </div>
  <div id="14" class="box">
    <input></input>
    <p class="id">14</p>
  </div>
  <div id="15" class="box">
    <p class="id">15</p>
    <input></input>
  </div>
</div>
<div id="instructions">
  <p class="header">Instructions:</p>
  <p class="info header">1-Byte Instructions</p>
  <p class="info">0 = Halt</p>
  <p class="info">1 = Add (R0 = R0 + R1)</p>
  <p class="info">2 = Subtract (R0 = R0 - R1)</p>
  <p class="info">3 = Increment R0 (R0 = R0 + 1)</p>
  <p class="info">4 = Increment R1 (R1 = R1 + 1)</p>
  <p class="info">5 = Decrement R0 (R0 = R0 - 1)</p>
  <p class="info">6 = Decrement R1 (R1 = R1 - 1)</p>
  <p class="info">7 = Ring Bell/Beep</p>
  <p class="info header">2-Byte Instructions, value of the second Byte is called &ltdata&gt</p>
  <p class="info">8 = Print &ltdata&gt</p>
  <p class="info">9 = Load value at address &ltdata&gt into R0</p>
  <p class="info">10 = Load value at address &ltdata&gt into R1</p>
  <p class="info">11 = Store R0 into address &ltdata&gt</p>
  <p class="info">12 = Store R1 into address &ltdata&gt</p>
  <p class="info">13 = Jump to address &ltdata&gt</p>
  <p class="info">14 = Jump to address &ltdata&gt if R0 == 0</p>
  <p class="info">15 = Jump to address &ltdata&gt if R0 != 0</p>
</div>
<div id="output">
  <p>Output:</p>
</div>

Answer 1

当您.box使用input的100％空格时，p标记没有剩余空间，并且溢出到下一个div，您可以使用{{1}在顶部设置数字，

position:absolute

#case .box{
  position:relative;
}
#case .box .id{
  position:absolute;
  top:10px;
  padding-left:5px;
}

body {
  background-color: dimgrey;
}
p {
  text-align: center;
  line-height: 100px;
  font-size: 40px;
  width: 100px;
  font-family: Verdana, Geneva, sans-serif;
  margin: 0 0 0 0;
}
input {
  outline: none;
  border: none;
  background-color: transparent;
  text-align: center;
  font-size: 40px;
  width: 100px;
  height: 100px;
  font-family: Verdana, Geneva, sans-serif;
  margin: 0;
}
.id {
  font-size: 20px;
  line-height: 20px;
  text-align: left;
  width: 5px;
  display: block;
}
input:focus {
  background-color: lightblue;
}
#register {
  display: inline-block;
  border: 2px solid black;
  width: 204px;
  margin: 80px;
  background-color: lightgrey;
}
#case {
  display: inline-block;
  border: 2px solid black;
  width: 408px;
  height: 408px;
  margin: 80px 0;
  overflow: hidden;
  background-color: lightgrey;
}
#instructions {
  display: block;
  border: 3px solid black;
  width: 680px;
  height: auto;
  margin: 80px 80px;
  background-color: lightgrey;
  float: right;
  overflow: hidden;
}
#instructions p {
  padding: 0px 0px 10px 10px;
}
#output {
  border: 3px solid black;
  width: 695px;
  margin: 0 0 0 80px;
  background-color: lightgrey;
  overflow: hidden;
}
#output p {
  margin: 0px 20px;
}
.box {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 0;
}
.info {
  text-align: left;
  line-height: inherit;
  width: inherit;
  font-size: 20px;
}
.header {
  text-decoration: underline;
}
#case .box{
  position:relative;
}
#case .box .id{
  position:absolute;
  top:10px;
  padding-left:5px;
}

Answer 2

<强> HTML

Person

<强> CSS

PersonKey

只需将输入设置得更小，就可以将p放入框内。

https://jsfiddle.net/6usbud6a/2/

如果您希望输入整个框以及左上角的框号如下：https://jsfiddle.net/6usbud6a/3

您必须相对于框添加位置，然后添加对于跨度的绝对位置，以及顶部位置0。