我嘗試設計一個網站，當我按 TAB 鍵瀏覽按鈕時，出現了一個奇怪的突出顯示。它應該只是按鈕的邊框，但在提供的影像中它看起來不是那樣。如果你能告訴我原因，我會很高興。這是代碼/設計的 css 和 html 影像。
.pagination-buttons {
position: absolute;
bottom: -40px;
left: 50%;
transform: translate(-50%, 0);
}
.pagbut {
background-color: white;
width: 16px;
height: 8px;
border: 1px solid #06d6a0;
border-radius: 100px;
cursor: pointer;
}
.button-fill {
background-color: #06d6a0;
} <div class="pagination-buttons pagi-design">
<button class="pagbut"> </button>
<button class="pagbut button-fill"> </button>
<button class="pagbut"> </button>
<button class="pagbut"> </button>
</div>
uj5u.com熱心網友回復：
這是因為 這渲染了一個空間，它也有一個你看不到的高度。
所以當你選擇按鈕時，你也選擇了里面的文本。
您的問題的兩種解決方案：洗掉空格（就像我對第一個按鈕所做的那樣）或將 設定overflow: hidden為按鈕，這樣文本就不會溢位容器。
.pagination-buttons {
position: absolute;
bottom: -40px;
left: 50%;
transform: translate(-50%, 0);
}
.pagbut {
background-color: white;
width: 16px;
height: 8px;
border: 1px solid #06d6a0;
border-radius: 100px;
cursor: pointer;
overflow: hidden;
}
.button-fill {
background-color: #06d6a0;
}<div class="pagination-buttons pagi-design">
<button class="pagbut"></button>
<button class="pagbut button-fill"> </button>
<button class="pagbut"> </button>
<button class="pagbut"> </button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/396936.html