为什么元素不会停留在同一行？

Question

我已经尝试了各种显示和位置，以使所有这些元素都在同一行上，但是由于某种原因，按钮“添加”处于一个奇怪的位置。另外，斜线的中心与框的中心不在水平方向上，应该稍高一点。主要问题是使所有这些元素都在同一条线上，我想以某种方式使它们的中心都在同一条假想的水平线上。我怎么做？这是jsfiddle，

#slash {
  font-size: 50px;
  color: #E86B00;
  display: inline-block;
}

textarea {
  border: 3px solid #FF9333;
  resize: none;
  height: 30px;
  width: 50px;
}

textarea:focus {
  border: 3px solid #E86D00;
  outline: none;
}

button {
  height: 30;
  width: 70;
  color: #FFFFFF;
  background-color: #FF7800;
}

button:hover {
  background-color: #E86D00;
  cursor: pointer;
}

button:active {
  background-color: #FF8315;
  border-right: 2px solid #DCDCDC;
  border-bottom: 2px solid #DCDCDC;
  border-top: 2px solid #ADADAD;
  border-left: 2px solid #ADADAD;
}

<textarea type="textarea" id="fir" value="" onfocus="this.value=''"></textarea>
<p id="slash"> / </p>
<textarea type="textarea" id="sec" value="" onfocus="this.value=''"></textarea>
<button onclick="TestGrade();">Add</button>

Answer 1

您必须将它们与vertical-align对齐。我已将其添加到以下元素中。

  #slash {
     font-size: 50px;
     color: #E86B00;
     display: inline-block;
vertical-align:middle;
  }
  textarea {
     border: 3px solid #FF9333;
     resize: none;
     height:30px;
     width:50px;
vertical-align:middle;
  }
  textarea:focus{
     border: 3px solid #E86D00;
     outline: none;
  }
  button {
    height: 30; width: 70;
    color: #FFFFFF;
    background-color: #FF7800;
vertical-align:middle;
  }
  button:hover {
    background-color: #E86D00;
    cursor: pointer;
  }
  button:active {
    background-color: #FF8315;
    border-right: 2px solid #DCDCDC;
    border-bottom: 2px solid #DCDCDC;
    border-top: 2px solid #ADADAD;
    border-left: 2px solid #ADADAD;
  }

<textarea type="textarea" id="fir" value="" onfocus="this.value=''"></textarea>
<p id = "slash"> / </p>
<textarea type="textarea" id="sec" value="" onfocus="this.value=''"></textarea>
<button onclick="TestGrade();" >Add</button>

Answer 2

我建议您将所有元素保留在一个div内并将这些CSS属性添加到div中：display：flex，align-items：center