Bunun oldukça basit bir soru olduğunu biliyorum ama hayatım boyunca çözemiyorum. Bir arka plan resmi uyguladığım iki bağlantım var. Şu anda göründüğü gibi (gölge için özür dileriz, sadece bir düğmenin kaba bir taslağı):

Ancak, bu iki düğmenin yan yana olmasını istiyorum. Hizalama ile ne yapılması gerektiğini gerçekten anlayamıyorum.

İşte 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>

İşte 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;
}

float:left;Her iki div'e de uygulayarak onları yan yana koymalısınız.

Dikkat edin float: left… 🤔

... öğeleri yan yana hizalamanın birçok yolu vardır.

İki unsuru yan yana gerçekleştirmenin en yaygın yolları aşağıdadır…

Demo: Codepen'de aşağıdaki tüm örnekleri görüntüleyin / düzenleyin

Aşağıdaki tüm örnekler için temel stiller…

Bu örneklerdeki bazı temel css stilleri parentve childöğeleri:

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

floatÇözümü kullanmak, diğer unsurlar üzerinde istenmeyen etkime neden olur. (İpucu: Bir düzeltme kullanmanız gerekebilir .)

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

Not : Bu iki alt öğe arasındaki boşluk, div etiketleri arasındaki boşluk kaldırılarak kaldırılabilir:

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
}

basit tut

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