Dua elemen blok sebaris, masing-masing lebarnya 50%, tidak pas berdampingan dalam satu baris

87

<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
}
</style>
</head>
<body>
    <div id="left">Left</div>
    <div id="right">Right</div>
</body>
</html>

JSFiddle: http://jsfiddle.net/5EcPK/

Kode di atas mencoba menempatkan div # kiri dan div #right, berdampingan, dalam satu baris. Tapi seperti yang Anda lihat di URL JSFiddle di atas, bukan itu masalahnya.

Saya dapat menyelesaikan masalah yang mengurangi lebar salah satu div menjadi 49%. Lihat http://jsfiddle.net/mUKSC/ . Tetapi ini bukan solusi yang ideal karena celah kecil muncul di antara dua div.

Cara lain saya bisa memecahkan masalah adalah dengan mengapung kedua div. Lihat http://jsfiddle.net/VptQm/ . Ini bekerja dengan baik.

Tapi pertanyaan asli saya tetap ada. Mengapa jika kedua div disimpan sebagai elemen blok sebaris, keduanya tidak pas berdampingan?

html css Lone Learner
sumber

Jawaban:

140

Saat menggunakan inline-blockelemen, akan selalu ada whitespace masalah di antara elemen tersebut (ruang itu berukuran sekitar ~ 4px lebar).

Jadi, keduanya divs, yang keduanya memiliki lebar 50%, ditambah dengan whitespace(~ 4px) lebarnya lebih dari 100%, dan itu rusak. Contoh masalah Anda:

Tampilkan cuplikan kode

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Luaskan cuplikan

Ada beberapa cara untuk memperbaikinya:

1. Tidak ada spasi di antara elemen-elemen tersebut

Tampilkan cuplikan kode

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><div class="right">bar</div>

Luaskan cuplikan

2. Menggunakan komentar HTML

Tampilkan cuplikan kode

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><!--
--><div class="right">bar</div>

Luaskan cuplikan

3. Atur orang tua font-sizemenjadi 0, dan kemudian tambahkan beberapa nilai pada inline-blockelemen

Tampilkan cuplikan kode

body{
  margin: 0; /* removing the default body margin */
}

.parent{
  font-size: 0;  /* parent value */
}

.parent > div{
  display: inline-block;
  width: 50%;
  font-size: 16px; /* some value */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="parent">
  <div class="left">foo</div>
  <div class="right">bar</div>
</div>

Luaskan cuplikan

4. Menggunakan margin negatif di antara keduanya ( tidak disukai )

Tampilkan cuplikan kode

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
  margin-right: -4px; /* negative margin */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Luaskan cuplikan

5. Menjatuhkan sudut penutupan

Tampilkan cuplikan kode

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div
><div class="right">bar</div>

<hr>

<div class="left">foo</div><div class="right">
bar</div>

Luaskan cuplikan

6. Melewati tag penutup HTML tertentu (terima kasih @thirtydot untuk referensinya )

Tampilkan cuplikan kode

body{
  margin: 0; /* removing the default body margin */
}

ul{
  margin: 0; /* removing the default ul margin */
  padding: 0; /* removing the default ul padding */
}

li{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<ul>
  <li class="left">foo
  <li class="right">bar
</ul>

Luaskan cuplikan

Referensi:

Seperti @ MarcosPérezGude mengatakan , yang terbaik cara adalah dengan menggunakan rem, dan menambahkan beberapa nilai default untuk font-sizedi htmltag (seperti di HTML5Boilerplate ). Contoh:

html{
    font-size: 1em;
}

.ib-parent{             /* ib -> inline-block */
    font-size: 0;
}

.ib-child{
    display: inline-block;
    font-size: 1rem;
}

Pembaruan : karena hampir 2018., gunakan flexbox atau bahkan lebih baik - tata letak kisi CSS .

Vucko
sumber

3

@hoosierEE itu bukan omong kosong. Jarak antar elemen tidak apa-apa, itu karena elemen blok sebaris akan diposisikan pada baris teks. Jika Anda memberi spasi dalam satu baris, maka akan ada spasi. Jadi perilakunya adalah benar, bahkan jika Anda pikir itu adalah masalah (seperti yang dikatakan Vucko salah).

Marcos Pérez Gude

2

Saya setuju dengan @ MarcosPérezGude, perilaku ini benar. Seperti yang Anda lihat dari posting saya, ada beberapa cara untuk menghapus spasi itu (saya sendiri menggunakan komentar HTML untuk menghapus spasi). Tetapi jika Anda keberatan dengan ruang kosong itu, Anda selalu dapat menggunakan flexbox, table/table-row/table-cellatau menggunakan float.

Vucko

2

Saya menggunakan blok-inline dengan sempurna. Pendekatan normal saya adalah parent { font-size:0; } child {font-size: 1rem; }. Dengan rem sekarang adalah yang termudah

Marcos Pérez Gude

agak menjengkelkan bahwa tab masih diurai sebagai spasi. Saya belum pernah melihat bahwa menghapus perbaikan tag penutup sebelumnya, apakah itu memiliki ketidakstabilan atau efek samping?

MintWelsh

Pastikan borderjuga mati. Ini dapat menambah ruang jika Anda mengapung div.

berkembang

23

jawaban yang bagus di css3 adalah:

white-space: nowrap;

di node induk, dan:

white-space: normal;
vertical-align: top;

dalam div (atau lainnya) sebesar 50%

contoh: http://jsfiddle.net/YpTMh/19/

EDIT:

ada cara lain dengan:

font-size: 0;

untuk node induk dan menggantinya di node anak

Matriks
sumber

7

Itu karena spasi di antara dua div Anda ditafsirkan sebagai spasi. Jika Anda meletakkan <div>tag Anda sejajar seperti yang ditunjukkan di bawah, masalah diperbaiki :

<div id="left"></div><div id="right"></div>

Dan
sumber

4

Karena ada ruang antar elemen. Jika Anda menghapus semua spasi, mereka akan muat .

<div id="left">Left</div><div id="right">Right</div>

Michiel van Oosterhout
sumber

4

Buat mereka memblokir, bukan blok sebaris. Ini akan membuat div mengabaikan spasi di antara mereka.

display:block;

atau hapus spasi di antara tag

<div id='left'></div><div id='right'></div>

atau tambahkan

margin: -1en;

ke salah satu div untuk mengurangi ruang yang diambil oleh ruang tunggal yang diberikan.

vittore
sumber

2

Silakan periksa kode di bawah ini:

body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
    float:left;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
    float:left;
}

<div id="left">Left</div>
<div id="right">Right</div>

Luaskan cuplikan

Vaneet Thakur
sumber

2

Contoh Flexbox - ini akan digunakan untuk kelas induk yang memegang dua elemen berdampingan.

.parentclass {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Diambil dari memusatkan div secara vertikal di dalam div lain

nbixler
sumber

1

Ini bisa dilakukan dengan menambahkan css display: inline ke div yang menyimpan elemen inline.

Saat menghapus ruang putih menggunakan margin dengan nilai negatif, perlu untuk menambahkannya ke elemen khusus ini. Karena menambahkannya ke kelas akan memengaruhi tempat di mana kelas ini telah digunakan.

Jadi akan lebih aman menggunakan display: inline;

Vish
sumber

0

tambahkan float: left; ke kedua tag div.

div {
  float: left;
}

Luaskan cuplikan

Tatenda
sumber