无法将按钮放置在与我的输入字段相同的高度答案

【问题标题】：Can’t place button at the same height as my input fields无法将按钮放置在与我的输入字段相同的高度
【发布时间】：2017-11-25 18:45:15
【问题描述】：

我想让我的两个输入与我的按钮处于相同的高度，但按钮被放在下面。

#startButton {
  height: 90%;
  width: 20%;
  margin-left: 79%;
  position: absolute;
  outline: 0;
}

<div id='menu'>
  Number of colums:
  <br>
  <input id='colsInput' type='number' maxlength='2'>
  <br>
  <br> Number of rows:
  <br>
  <input id='rowsInput' type='number' maxlength='2'>
  <button id='startButton'>Start</button>
</div>

【问题讨论】：

因为按钮是绝对位置但输入不是？
不，为输入提供绝对定位并不能解决问题
我没有说你应该在输入中添加position: absolute。
那我该怎么办？我对CSS一无所知
真的不知道你为什么不在第二个输入之后就中断并把它放在那里，没有任何样式。

标签： html css

【解决方案1】：

只需设置一个最高值。

#startButton {
  height: 90%;
  width: 20%;
  margin-left: 79%;
  position: absolute;
  top: 10px;
  outline: 0;
}

<div id='menu'>
  Number of colums:
  <br>
  <input id='colsInput' type='number' maxlength='2'>
  <br>
  <br> Number of rows:
  <br>
  <input id='rowsInput' type='number' maxlength='2'>
  <button id='startButton'>Start</button>
</div>

【讨论】：

【解决方案2】：

你为什么不使用float property：

#startButton {
  height: 90%;
  width: 20%;
  float:right;
  outline: 0;
}
.form {
width:50%;
display:inline-block
}

<div id='menu'>
  <div class="form">
  Number of colums:
  <br>
  <input id='colsInput' type='number' maxlength='2'>
  </div>
  <div class="form">
   Number of rows:
  <br>
  <input id='rowsInput' type='number' maxlength='2'>
  </div>
  <button id='startButton'>Start</button>
</div>

【讨论】：

【解决方案3】：

你需要给你的容器添加一个位置#menu，比如position: relative;，然后，给你的按钮添加一个顶部值top: 0；它应该可以解决问题

#startButton {
  height: 90%;
  width: 20%;
  margin-left: 79%;
  position: absolute;
  outline: 0;
 top: 0;
}
#menu {
position: relative;
}

<div id='menu'>
  Number of colums:
  <br>
  <input id='colsInput' type='number' maxlength='2'>
  <br>
  <br> Number of rows:
  <br>
  <input id='rowsInput' type='number' maxlength='2'>
  <button id='startButton'>Start</button>
</div>

【讨论】：

@Victofu 我只是好奇为什么这个解决方案会被接受。它确实解决了你的问题？
@TemaniAfif 你愿意解释一下它是如何解决的吗？按钮显示在同一行...不是吗？
这就是我问的原因 :) 我没有说它不能解决......但我不明白 OP 想要什么以及为什么这是合适的
I’d like to have my two inputs at the same height as my button 我没有看到他们在同一高度
@TemaniAfif 我确实将问题理解为：at the same top value，如果要求按钮的高度与两个输入的高度相同，那么这个答案是错误的。