這讓我發瘋了，我問了幾個比我更有編碼經驗的人，在一些沒有用的建議之后，我得到的最多的是“我不知道，CSS 很爛，抱歉。” 我在頁面上的游戲板下方有一個重繪 頁面按鈕，僅此而已。我只是希望該按鈕出現在游戲板下方，而不是在它的底部或上方，或者在左側。我想知道我是否以某種方式限制了頁面的大小，以便按鈕沒有進一步向下移動的空間。但我不知道會發生在哪里（我非常缺乏經驗）。
相關的 HTML 和 CSS（嘗試了一堆與 CSS 的組合，這讓我最接近）：
<div id="gameArea">
<table id="gameBoard"></table>
</div>
<div id="button">
<button type="button" class="btn btn-warning" onClick="window.location.reload();">Refresh Page</button>
</div>
#gameArea {
position: relative;
}
#gameBoard {
position: absolute;
margin-left: 25%;
margin-right: 25%;
margin-bottom: 10px;
button {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -104.5px;
margin-top: 1px;
}
uj5u.com熱心網友回復：
簡而言之，如果從 HTML 代碼中查看元素時需要將元素顯示在不合邏輯的位置，則只需要絕對位置。但在你的情況下，這個職位是完全有意義的。你想先顯示你的游戲板，然后你想在它下面顯示你的按鈕。因此，您只需對電路板進行編程，然后對按鈕進行編程。在那些地方，您只想將元素水平對齊。你不需要 position: absolute 。
/* Borders can be removed*/
*{
box-sizing: border-box;
}
#completeView {
border: solid 5px red;
width: 100%;
}
#gameArea {
border: solid 5px blue;
width: 100%;
}
#gameBoard {
/* Give this the table the preferred width and let the Browser automaticcly determen what the margin should be on the left side and right side. This way it will be equally divided and positioned in the middle */
border: solid 5px green;
width: 50%;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
margin-bottom: 25px;
}
#buttonArea {
/*the div is 100%, but it's content, a text-button should be in the center, so use text-align*/
border: solid 5px orange;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}<div id="completeView">
<div id="gameArea">
<table id="gameBoard">
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
</table>
</div>
<div id="buttonArea">
<button type="button" class="btn btn-warning" onClick="window.location.reload();">Refresh Page</button>
</div>
</div>uj5u.com熱心網友回復：
對絕對定位的元素使用負值 ，使其位于其相對定位的父元素的底部邊框之下。bottom
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/419389.html
標籤：