不能將按鈕放在與我的輸入字段相同的高度

Question

我想讓我的兩個輸入處於與我的按鈕相同的高度，但按鈕處於放置狀態。

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

Answer 1

您需要的位置添加到您的容器#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>

Answer 2

只需設置一個最高值。

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

Answer 3

你爲什麼不使用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>