为什么元素不在同一行？

Question

我尝试了各种显示和位置以使所有这些元素位于同一行，但由于某种原因，按钮 "Add" 处于一个奇怪的位置。此外，斜线的中心没有与框的中心水平对齐，它应该稍微向上一点。主要问题是让所有这些元素都在同一条线上，我想以某种方式让它们的中心都在同一条假想的水平线上。我怎么做？这是 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

为什么元素不在同一行？

Why won't elements stay on the same line?

html

css

css-position

font-size