如何在 HTML-CSS-JS 中合并 2 个元素？

Question

我想在 HTML 和 CSS 中将 2 个元素（准确地说是按钮）合并为 1 个元素，如果需要，Javascript.
这是 HTML-CSS 代码：

#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 个并排的按钮，但不会合并在一起。即使将按钮嵌套在另一个按钮中也无济于事。我该怎么办？

这是我希望按钮的外观（当然不包括灰色背景。）：

The Image was made in Figma, if anybody was wondering.

Answer 1

你能详细解释一下你到底想做什么吗？从外观上看，我首先认为您只想拥有 1 个带有图标和文本的按钮。

在这种情况下，您可以 <button id="downloadButton">Download <span id="downloadButtonIcon"></span></button> 并相应地设计跨度以显示图标。如果这不是您的意图，请按照上述说明进行说明！

Answer 2

您不需要使用 2 个按钮来在按钮的背景上显示 icon/image。只需对按钮使用 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>

Answer 3

您可以尝试这样的操作：

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

如何在 HTML-CSS-JS 中合并 2 个元素？

How can I merge 2 elements in HTML-CSS-JS?

html

javascript

css

tags

button