Wiem, że to dość proste pytanie, ale nie mogę tego rozgryźć za całe życie. Mam dwa łącza, do których zastosowałem obraz tła. Oto jak to wygląda obecnie (przepraszam za cień, tylko szkic przycisku):
Jednak chcę, aby te dwa przyciski były obok siebie. Naprawdę nie wiem, co należy zrobić z wyrównaniem.
Oto kod 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>
Oto 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;
float:left;
do obudiv
wykonało to doskonale. Czy możesz zamieścić swój komentarz jako odpowiedź? Dzięki!display: inline-block;
ale jest mniej obsługiwana ...Odpowiedzi:
Zastosuj
float:left;
do obu swoich elementów div, aby stały obok siebie.źródło
clear:both;
muszę gdzieś tam wejść? Nigdy nie byłem uczony CSS, ale wydaje mi się typowy, gdy widzę elementy pływające, aby zobaczyć również czyste.clear:both
zrobi dokładnie odwrotnie. „Elementy za elementem pływającym będą go otaczać. Aby tego uniknąć, użyj właściwości clear”.<br style="clear: both;" />
, gdybyś miał trzeci div, który chciałeś, pod dwoma, które były wyrównane.<div style="clear: both;">...</div>
(nie wymaga br)Uważaj
float: left
… 🤔… Istnieje wiele sposobów wyrównywania elementów obok siebie.
Poniżej znajdują się najczęstsze sposoby osiągnięcia dwóch elementów obok siebie…
Demo: Wyświetl / edytuj wszystkie poniższe przykłady w Codepen
Podstawowe style dla wszystkich poniższych przykładów…
Niektóre podstawowe style CSS dla elementów
parent
ichild
w tych przykładach:Użycie
float
rozwiązania może w niezamierzony sposób wpłynąć na inne elementy. (Wskazówka: może być konieczne użycie poprawki przezroczystej ).html
css
html
css
Uwaga : odstęp między tymi dwoma elementami podrzędnymi można usunąć, usuwając odstęp między znacznikami DIV:
html
css
html
css
html
css
html
css
źródło
inline-block
ma pewne problemy ze zgodnością. Poza tym jakąś przewagę nad używaniem tegofloat
?inline-block
jest nowszy, więc Twoje przeglądarki targe mogą go jeszcze nie obsługiwać (chociaż istnieje wiele właściwości specyficznych dla przeglądarki, a także obejścia tego problemu). Zaletą jest to, że element zawierający zawinie elementy; zfloat
będziesz musiał dodać css do elementu nadrzędnego.nie komplikuj
źródło