Saya tahu ini adalah pertanyaan yang agak sederhana, tetapi saya tidak bisa memahaminya untuk kehidupan saya. Saya memiliki dua tautan tempat saya menerapkan gambar latar belakang. Begini tampilannya saat ini (permintaan maaf untuk bayangan, hanya sketsa kasar dari sebuah tombol):

Namun, saya ingin kedua tombol itu berdampingan. Saya benar-benar tidak tahu apa yang harus dilakukan dengan penyelarasan.

Inilah HTML-nya

<div id="dB"}>
    <a href="http://notareallink.com" title="Download" id="buyButton">Download</a> 
</div>
<div id="gB">
    <a href="#" title="Gallery" onclick="$j('#galleryDiv').toggle('slow');return false;" id="galleryButton">Gallery</a>     
</div>

Inilah CSS-nya

#buyButton {
    background: url("assets/buy.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:232px;
     text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}

#galleryButton {
    background: url("images/galleryButton.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:230px;
     text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px 0;
}

Berlaku float:left;untuk kedua div Anda harus membuatnya berdiri berdampingan.

Waspadalah float: left… 🤔

... ada banyak cara untuk menyelaraskan elemen secara berdampingan.

Di bawah ini adalah cara paling umum untuk mencapai dua elemen secara berdampingan ...

Demo: Lihat / edit semua contoh di bawah ini pada Codepen

Gaya dasar untuk semua contoh di bawah ini ...

Beberapa gaya css dasar untuk parentdan childelemen dalam contoh ini:

.parent {
  background: mediumpurple;
  padding: 1rem;
}
.child {
  border: 1px solid indigo;
  padding: 1rem;
}

Menggunakan floatsolusi saya, pengaruh yang tidak diinginkan pada elemen lain. (Petunjuk: Anda mungkin perlu menggunakan perbaikan yang jelas .)

html

<div class='parent'>
  <div class='child float-left-child'>A</div>
  <div class='child float-left-child'>B</div>
</div>

css

.float-left-child {
  float: left;
}

html

<div class='parent'>
  <div class='child inline-block-child'>A</div>
  <div class='child inline-block-child'>B</div>
</div>

css

.inline-block-child {
  display: inline-block;
}

Catatan : ruang antara dua elemen anak ini dapat dihapus, dengan menghapus ruang antara tag div:

html

<div class='parent'>
  <div class='child inline-block-child'>A</div><div class='child inline-block-child'>B</div>
</div>

css

.inline-block-child {
  display: inline-block;
}

html

<div class='parent flex-parent'>
  <div class='child flex-child'>A</div>
  <div class='child flex-child'>B</div>
</div>

css

.flex-parent {
  display: flex;
}
.flex-child {
  flex: 1;
}

html

<div class='parent inline-flex-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

css

.inline-flex-parent {
  display: inline-flex;
}

html

<div class='parent grid-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

css

.grid-parent {
  display: grid;
  grid-template-columns: 1fr 1fr
}

tetap sederhana

<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>