Bagaimana cara menyelaraskan elemen div dengan benar?

351

Badan dokumen html saya terdiri dari 3 elemen, tombol, formulir, dan kanvas. Saya ingin tombol dan formulir selaras kanan dan kanvas tetap selaras kiri. Masalahnya adalah ketika saya mencoba untuk menyelaraskan dua elemen pertama, mereka tidak lagi saling mengikuti dan sebaliknya bersebelahan secara horizontal ?, inilah kode yang saya miliki sejauh ini, saya ingin formulir mengikuti langsung setelah tombol di sebelah kanan. tanpa ruang di antara keduanya.

#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>
Luaskan cuplikan

css html MEURSAULT
sumber

Jawaban:

338

Anda dapat membuat div yang berisi formulir & tombol, lalu buat div mengapung ke kanan dengan mengatur float: right;.

vantrung -cuncon
sumber
Tidak pernah terpikir saya akan menggunakan float. Saya mencoba margin-left: auto;tetapi itu tidak berhasil yang mengejutkan saya karena elemen yang saya coba selaraskan ke kanan adalah relatif.
DFSFOT
461

mengapung ok, tapi bermasalah dengan ie6 & 7.

saya lebih suka menggunakan margin-left:auto; margin-right:0;div bagian dalam.

pstanton
sumber
6
@ShellNinja kenapa? saya tahu 0itu valid, namun demikian 0px ... berdebat tentang hal Anda sehingga kami belajar sesuatu.
pstanton
29
Dengan meninggalkan unit ini, peramban dapat melompati perhitungan tertentu untuk membuat kinerja yang meningkat ini. Jika nol, mengapa membuang sumber daya menghitung tata letak berdasarkan unit? Nol adalah nol terlepas dari unit ... Orang akan berpikir logika ini akan dibangun ke browser sekarang. tautan
ShellNinja
7
tidak bisa tidak setuju tetapi saya ragu itu banyak mempengaruhi kinerja. sunting.
pstanton
24
Saya tidak bisa menjalankan ini, div masih sejajar. Bisakah Anda memberikan biola atau beberapa baris html / css?
Griddo
21
Pastikan elemen Anda memilikidisplay: block;
derek_duncan
202

Jawaban lama Pembaruan: gunakan flexbox, cukup banyak yang berfungsi di semua browser sekarang.

<div style="display: flex; justify-content: flex-end">
  <div>I'm on the right</div>
</div>
Luaskan cuplikan

Dan Anda bisa menjadi lebih mewah, cukup:

<div style="display: flex; justify-content: space-around">
  <div>Left</div>
  <div>Right</div>
</div>
Luaskan cuplikan

Dan pelamun:

<div style="display: flex; justify-content: space-around">
   <div>Left</div>
   <div>Middle</div>
  <div>Right</div>
</div>
Luaskan cuplikan

Michael Bushe
sumber
4
ini bekerja, tetapi ketika layar menjadi kecil bukannya menumpuk mereka hanya menjadi sangat sempit
jean d'arme
6
Anda perlu menambahkan kueri media untuk mengubah arah fleksibel dari baris ke kolom pada titik putus yang Anda tentukan. Anda mungkin ingin mengubah atau menghapus konten pembenaran Anda dalam contoh ini jika tidak, hal-hal akan naik dan turun alih-alih kiri dan kanan.
Michael Bushe
Ini berhasil untuk saya. Jawaban sebelumnya tidak. Menggunakan "shiny".
Roger
30

Jawaban lain untuk pertanyaan ini tidak begitu baik karena float:rightbisa keluar dari div induk (overflow: tersembunyi untuk orangtua kadang-kadang mungkin membantu) dan margin-left: auto, margin-right: 0bagi saya tidak bekerja di div bersarang kompleks (saya tidak menyelidiki alasannya).

Saya sudah menemukan bahwa elemen tertentu text-align: rightberfungsi, dengan asumsi ini berfungsi ketika elemen dan orang tua keduanya inlineatau inline-block.

Catatan: text-alignproperti CSS menjelaskan bagaimana konten inline seperti teks diselaraskan dalam elemen blok induknya. text-aligntidak mengontrol perataan elemen blok itu sendiri, hanya konten inline mereka.

Sebuah contoh:

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

Ini JS Fiddle .

Mladen Adamovic
sumber
17

Apakah maksud Anda seperti ini? http://jsfiddle.net/6PyrK/1

Anda dapat menambahkan atribut float:rightdan clear:both;ke formulir dan tombol

Joseph Marikle
sumber
15

Jika Anda memiliki banyak div yang ingin Anda selaraskan di ujung kanan div induk, atur text-align: right;div induk.

Mo Bitar
sumber
14

Anda dapat menggunakan flexboxdengan flex-growmenekan elemen terakhir ke kanan.

<div style="display: flex;">
  <div style="flex-grow: 1;">Left</div>
  <div>Right</div>
</div>
jzilg
sumber
1
Saya pribadi merasa ini adalah jawaban yang benar untuk tahun 2020: P
Mike Kellogg
2

Jika Anda tidak harus mendukung IE9 dan di bawah ini Anda dapat menggunakan flexbox untuk menyelesaikan ini: codepen

Ada juga beberapa bug dengan IE10 dan 11 ( dukungan flexbox ), tetapi mereka tidak ada dalam contoh ini

Anda dapat menyelaraskan <button>dan <form>dengan membungkusnya secara vertikal dalam wadahflex-direction: column . Urutan sumber elemen akan menjadi urutan di mana mereka ditampilkan dari atas ke bawah jadi saya memesannya kembali.

Anda kemudian dapat secara horizontal menyelaraskan wadah formulir & tombol dengan kanvas dengan membungkusnya dengan wadah flex-direction: row . Sekali lagi urutan sumber elemen akan menjadi urutan di mana mereka ditampilkan dari kiri ke kanan jadi saya memesannya kembali.

Juga, ini akan mengharuskan Anda menghapus semua positiondan floataturan gaya dari kode yang tertaut dalam pertanyaan.

Berikut adalah versi HTML terpangkas di codepen yang tertaut di atas.

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

Dan di sini adalah CSS yang relevan

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

#formContainer {
  display: flex;
  flex-direction: column;
}
Bates550
sumber
1

Jawaban sederhana ada di sini:

<div style="text-align: right;">
    anything:
    <select id="locality-dropdown" name="locality" class="cls" style="width: 200px; height: 28px; overflow:auto;">
    </select>
</div>
Komunitas Ans
sumber
0

Anda cukup menggunakan bantalan-kiri: 60% (untuk mantan) untuk menyelaraskan konten Anda ke kanan dan secara bersamaan membungkus konten dalam wadah responsif (saya membutuhkan navbar dalam kasus saya) untuk memastikan itu berfungsi dalam semua contoh.

Leevansha
sumber
0

Jika Anda menggunakan bootstrap, maka:

<div class="pull-right"></div>
anil shrestha
sumber
Saya pikir Anda maksud <div class="text-right"></div>.
Alex Barker
1
dan tidak salah, kelas "pull-right" menghasilkan "float: right;" (diuji dengan Bootstrap 3.4.1)
Fabian Horlacher
-13

Saya tahu ini adalah pos lama tetapi tidak bisakah Anda menggunakan saja <div id=xyz align="right"> benar?

Anda bisa mengganti kanan dengan kiri, tengah dan justifikasi.

Bekerja di situs saya :)

Dafydd
sumber
21
Tolong jangan gunakan atribut HTML untuk memformat halaman Anda. Untuk itulah CSS dibuat. Bahkan, alignatributnya sudah tidak digunakan lagi .
Hanna
4
... dan karenanya alasan untuk pertanyaan seperti ini dan perlunya dijawab, karena metode lama tidak lagi berfungsi.
vapcguy
ohohoh, sangat negatif))
Nessi