Tôi biết đây là một câu hỏi khá đơn giản, nhưng tôi không thể tìm ra nó cho cuộc sống của tôi. Tôi có hai liên kết mà tôi đã áp dụng một hình ảnh nền. Đây là những gì nó hiện tại trông giống như (xin lỗi cho bóng tối, chỉ là một bản phác thảo thô của một nút):

Tuy nhiên, tôi muốn hai nút đó nằm cạnh nhau. Tôi thực sự không thể tìm ra những gì cần phải được thực hiện với sự liên kết.

Đây là HTML

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

Đây là CSS

#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;
}

Áp dụng float:left;cho cả hai div của bạn nên làm cho chúng đứng cạnh nhau.

Hãy coi chừng float: left🤔

Có rất nhiều cách để sắp xếp các yếu tố cạnh nhau.

Dưới đây là những cách phổ biến nhất để đạt được hai yếu tố song song

Bản trình diễn: Xem / chỉnh sửa tất cả các ví dụ dưới đây trên Codepen

Phong cách cơ bản cho tất cả các ví dụ dưới đây

Một số kiểu css cơ bản cho parentvà childcác thành phần trong các ví dụ sau:

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

Sử dụng floatgiải pháp của tôi có ảnh hưởng ngoài ý muốn trên các yếu tố khác. (Gợi ý: Bạn có thể cần phải sử dụng một clearfix .)

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;
}

Lưu ý : khoảng trắng giữa hai phần tử con này có thể được loại bỏ, bằng cách xóa khoảng trắng giữa các thẻ 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
}

giữ cho nó đơn giản

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