Ich weiß, dass dies eine ziemlich einfache Frage ist, aber ich kann sie für mein Leben nicht herausfinden. Ich habe zwei Links, auf die ich ein Hintergrundbild angewendet habe. So sieht es derzeit aus (Entschuldigung für den Schatten, nur eine grobe Skizze eines Knopfes):

Ich möchte jedoch, dass diese beiden Tasten nebeneinander liegen. Ich kann nicht wirklich herausfinden, was mit der Ausrichtung zu tun ist.

Hier ist der HTML-Code

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

Hier ist das 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;
}

Auf float:left;beide Divs auftragen, damit sie nebeneinander stehen.

Vorsicht float: left… 🤔

… Gibt es viele Möglichkeiten, Elemente nebeneinander auszurichten.

Im Folgenden finden Sie die häufigsten Möglichkeiten, um zwei Elemente nebeneinander zu erreichen.

Demo: Alle folgenden Beispiele auf Codepen anzeigen / bearbeiten

Grundstile für alle folgenden Beispiele…

Einige grundlegende CSS-Stile parentund childElemente in diesen Beispielen:

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

Mit der floatLösung habe ich unbeabsichtigte Auswirkungen auf andere Elemente. (Hinweis: Möglicherweise müssen Sie einen Clearfix verwenden .)

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

Hinweis : Der Abstand zwischen diesen beiden untergeordneten Elementen kann entfernt werden, indem der Abstand zwischen den div-Tags entfernt wird:

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
}

halte es einfach

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