如果需要，我想在 HTML、CSS 和 Javascript 中將 2 個元素（準確地說是按鈕）合并為 1 個。這是 HTML 代碼：
#downloadButtonDiv {
display: flexbox;
justify-content: left;
}
#downloadButton {
background-color: #00B0F0;
margin: 5px;
border: 1px;
border-color: #00B0F0;
outline: none;
border-radius: 5px;
padding-right: 0cm;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
height: 75px;
width: 275px;
}
#downloadButtonIcon {
background-color: #23a5d4;
margin: 5px;
border: 1px;
border-color: #23a5d4;
outline: none;
border-radius: 5px;
padding-left: 0cm;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
height: 75px;
width: 120px;
}<div id="downloadButtonDiv">
<button type="button" id="downloadButton">Download</button>
<button type="button" id="downloadButtonIcon"><img src="#" width=50/></button>
</div>這會生成 2 個并排的按鈕，但不會合并在一起。即使在另一個內部嵌套按鈕也無濟于事。我該怎么辦？如果您需要更多規格，如結果影像，請告訴我。
謝謝你！
uj5u.com熱心網友回復：
你能解釋一下你真正想做的事情嗎？從它的外觀來看，我首先認為您只想擁有一個帶有圖示和文本的 Button。
在這種情況下，您可以<button id="downloadButton">Download <span id="downloadButtonIcon"></span></button>相應地設定跨度樣式以顯示圖示。如果這不是您的意圖，請按照上述說明進行澄清！
uj5u.com熱心網友回復：
您不需要使用 2 個按鈕在按鈕的背景上顯示圖示/影像。只需position: relative;用于按鈕和position: absolute;影像。然后您可以使用top-left-right-bottom屬性調整影像的位置。下面的代碼擴展了影像，使其完全覆寫按鈕。
<style>
#downloadButton {
position: relative;
background-color: #00B0F0;
margin: 5px;
border: 1px;
border-color: #00B0F0;
outline: none;
border-radius: 5px;
padding-right: 0cm;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
height: 75px;
width: 275px;
}
#downloadButton img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
<button id="downloadButton">
Download
<img src="#" alt="">
</button>
uj5u.com熱心網友回復：
你可以嘗試這樣的事情：
.downloadButton {
display: grid;
grid-auto-flow: column;
place-items: center;
background-color: #00B0F0;
margin: 5px;
border: 1px;
border-color: #00B0F0;
outline: none;
border-radius: 5px;
padding-right: 0cm;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
height: 75px;
width: 275px;
} <button type="button" class="downloadButton"><img src="https://picsum.photos/32/32" width=50/><span>Download</span></button>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/317207.html
標籤：javascript html css 按钮 标签