不能将按钮放在与我的输入字段相同的高度

问题描述：

我想让我的两个输入处于与我的按钮相同的高度，但按钮处于放置状态。不能将按钮放在与我的输入字段相同的高度

#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>

因为按钮位置绝对，但投入都没有？ – panther

不，给绝对定位的输入不修复它 – Victofu

我没有说你应该添加'位置：绝对'输入。 – panther

答

您需要的位置添加到您的容器#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要什么，为什么这是合适的 – Kangouroops

这就是为什么我要问:)我是如何解决你的问题的？ –

答

只需设置一个最高值。

#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>

答

你为什么不使用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>

不能将按钮放在与我的输入字段相同的高度

相关推荐