Jak poprawnie wyrównać elementy div?

350

Treść mojego dokumentu HTML składa się z 3 elementów, przycisku, formularza i kanwy. Chcę, aby przycisk i formularz były wyrównane do prawej, a płótno pozostało wyrównane do lewej. Problem polega na tym, że kiedy próbuję wyrównać pierwsze dwa elementy, nie są one już względem siebie i zamiast tego są obok siebie poziomo ?, oto kod, który mam do tej pory, chcę, aby formularz podążał bezpośrednio za przyciskiem po prawej stronie bez odstępu między nimi.

#cTask {
  background-color: lightgreen;
}

#button {
  position: relative;
  float: right;
}

#addEventForm {
  position: relative;
  float: right;
  border: 2px solid #003B62;
  font-family: verdana;
  background-color: #B5CFE0;
  padding-left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
  <script type="text/javascript" src="timeline.js"></script>
  <link rel="stylesheet" href="master.css" type="text/css" media="screen" />
</head>

<body bgcolor="000" TEXT="FFFFFF">
  <div id="button">
    <button onclick="showForm()" type="button" id="cTask">
        Create Task
    </button>
  </div>
  <div id="addEventForm">
    <form>
      <p><label>Customer name: <input></label></p>
      <p><label>Telephone: <input type=tel></label></p>
      <p><label>E-mail address: <input type=email></label></p>
    </form>
  </div>
  <div>
    <canvas id="myBoard" width="1000" height="600">
      <p>Your browser doesn't support canvas.</p>
    </canvas>
  </div>
</body>
</html>
Rozwiń fragment kodu

css html MEURSAULT
źródło

Odpowiedzi:

336

Możesz utworzyć div, który zawiera zarówno formularz, jak i przycisk, a następnie ustawić div na pływak w prawo, ustawiając float: right;.

vantrung -cuncon
źródło
Nigdy nie myślałem, że użyję pływaka. Próbowałem, margin-left: auto;ale to nie zadziałało, co mnie zaskoczyło, ponieważ element, który próbuję wyrównać do prawej, jest względny.
DFSFOT
461

zmiennoprzecinkowe są w porządku, ale problematyczne z ie6 i 7.

wolałbym używać margin-left:auto; margin-right:0;na wewnętrznej div.

pstanton
źródło
6
@ ShellNinja dlaczego? wiem, że 0jest poprawny, ale również 0px ... argumentuj swój punkt widzenia, abyśmy się czegoś dowiedzieli.
pstanton
29
Wyjście z urządzenia pozwala przeglądarce pominąć niektóre obliczenia, aby poprawić wydajność. Jeśli zero, to po co marnować zasoby obliczając układ na podstawie jednostki? Zero wynosi zero bez względu na jednostkę ... Można by pomyśleć, że ta logika byłaby już wbudowana w przeglądarki. link
ShellNinja
7
nie mogę się nie zgodzić, ale wątpię, czy ma to duży wpływ na wydajność. edytować.
pstanton
24
Nie mogę tego uruchomić, div wciąż wyrównuje się do lewej. Czy możesz podać skrzypce lub niektóre (więcej) wierszy html / css?
Griddo,
21
Upewnij się, że Twój element madisplay: block;
derek_duncan
202

Stare odpowiedzi Aktualizacja: użyj Flexboksa, teraz działa prawie we wszystkich przeglądarkach.

<div style="display: flex; justify-content: flex-end">
  <div>I'm on the right</div>
</div>
Rozwiń fragment kodu

I możesz stać się jeszcze bardziej wyrafinowany, po prostu:

<div style="display: flex; justify-content: space-around">
  <div>Left</div>
  <div>Right</div>
</div>
Rozwiń fragment kodu

I hodowca:

<div style="display: flex; justify-content: space-around">
   <div>Left</div>
   <div>Middle</div>
  <div>Right</div>
</div>
Rozwiń fragment kodu

Michael Bushe
źródło
4
to działa, ale kiedy robi się mały ekran zamiast układania one po prostu bardzo wąskie
Jean d'arme
6
Musisz dodać zapytanie o media, aby zmienić kierunek wygięcia z wiersza na kolumnę w zdefiniowanym punkcie przerwania. Prawdopodobnie będziesz chciał zmienić lub usunąć treść justowania w tym przykładzie, w przeciwnym razie rzeczy rozciągną się w górę iw dół zamiast w lewo i w prawo.
Michael Bushe
To zadziałało dla mnie. Poprzednie odpowiedzi nie. Używanie „błyszczącego”.
Roger,
30

Inne odpowiedzi na to pytanie nie są tak dobre, ponieważ float:rightmogą wyjść poza div rodzica (przepełnienie: ukryte dla rodzica czasami może pomóc) imargin-left: auto, margin-right: 0 dla mnie nie działało w złożonych zagnieżdżonych divach (nie badałem dlaczego).

Odkryłem to dla niektórych elementów text-align: right działa, zakładając, że działa to, gdy element i element nadrzędny są jednocześnie inlinelub inline-block.

Zanotuj text-align właściwość CSS opisuje sposób wyrównywania treści wbudowanej, takiej jak tekst, w jej nadrzędnym elemencie bloku.text-alignnie kontroluje wyrównania samych elementów blokowych, a jedynie ich zawartość wbudowaną.

Przykład:

<div style="display: block; width: 80%; min-width: 400px; background-color: #caa;">
    <div style="display: block; width: 100%">
        I'm parent
    </div>
    <div style="display: inline-block; text-align: right; width: 100%">
        Caption for parent
    </div>
</div>

Oto skrzypce JS .

Mladen Adamovic
źródło
15

Jeśli masz wiele elementów div, które chcesz wyrównać obok siebie na prawym końcu elementu div elementu nadrzędnego, ustaw text-align: right;element div elementu nadrzędnego.

Mo Bitar
źródło
14

Możesz użyć za flexboxpomocą, flex-growaby przesunąć ostatni element w prawo.

<div style="display: flex;">
  <div style="flex-grow: 1;">Left</div>
  <div>Right</div>
</div>
jzilg
źródło
1
Osobiście uważam, że jest to poprawna odpowiedź na 2020 r .: P
Mike Kellogg
2

Jeśli nie musisz obsługiwać IE9 i poniżej, możesz użyć Flexboksa, aby rozwiązać ten problem: codepen

Istnieje również kilka błędów w IE10 i 11 ( obsługa Flexbox ), ale nie są one obecne w tym przykładzie

Możesz wyrównać w pionie <button>i <form>owijając je w pojemnik za pomocą flex-direction: column. Kolejność źródeł elementów będzie taka, w jakiej są wyświetlane od góry do dołu, więc zmieniłem ich kolejność.

Następnie możesz wyrównać poziomo pojemnik formularza i przycisku z płótnem, owijając je w pojemnik za pomocą flex-direction: row . Znów kolejność źródeł elementów będzie taka, w jakiej są wyświetlane od lewej do prawej, więc zmieniłem ich kolejność.

Wymagałoby to również usunięcia wszystkich positionifloat stylu reguł z kodu połączonego w pytaniu.

Oto skrócona wersja HTML w codepen, do którego link znajduje się powyżej.

<div id="mainContainer">
  <div>
    <canvas></canvas>
  </div>
  <div id="formContainer">
    <div id="addEventForm"> 
      <form></form>
    </div>
    <div id="button">
      <button></button>
    </div>
  </div>
</div>

A oto odpowiedni CSS

#mainContainer {
  display: flex;
  flex-direction: row;
} 

#formContainer {
  display: flex;
  flex-direction: column;
}
Bates550
źródło
1

Prosta odpowiedź jest tutaj:

<div style="text-align: right;">
    anything:
    <select id="locality-dropdown" name="locality" class="cls" style="width: 200px; height: 28px; overflow:auto;">
    </select>
</div>
Społeczność Ans
źródło
0

Możesz po prostu użyć padding-left: 60% (np.), Aby wyrównać zawartość do prawej i jednocześnie zawinąć zawartość w responsywny pojemnik (w moim przypadku wymagałem paska nawigacyjnego), aby upewnić się, że działa we wszystkich przykładach.

Leevansha
źródło
0

Jeśli używasz bootstrap, to:

<div class="pull-right"></div>
Anil Shrestha
źródło
Myślę, że miałeś na myśli <div class="text-right"></div>.
Alex Barker,
1
anil się nie myli, klasa „pull-right” powoduje „float: right;” (testowane z Bootstrap 3.4.1)
Fabian Horlacher
-13

Wiem, że to stary post, ale nie mogłeś go po prostu użyć <div id=xyz align="right"> poprawnie.

Możesz po prostu zastąpić prawą lewą, środkową i uzasadnić.

Pracowałem na mojej stronie :)

Dafydd
źródło
21
Nie używaj atrybutów HTML do formatowania strony. Do tego został stworzony CSS. W rzeczywistości alignatrybut jest teraz przestarzały .
Hanna,
4
... i stąd powód takiego pytania i potrzeba odpowiedzi na to pytanie, ponieważ stare metody już nie działają.
vapcguy
ohohoh, tyle negatywne))
Nessi