Dwa elementy inline-block, każdy o szerokości 50%, nie pasują obok siebie w jednym rzędzie

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/

Powyższy kod próbuje umieścić elementy div #left i div #right obok siebie w jednym wierszu. Ale jak widać na powyższym adresie URL JSFiddle, tak nie jest.

Jestem w stanie rozwiązać ten problem, zmniejszając szerokość jednego z elementów div do 49%. Zobacz http://jsfiddle.net/mUKSC/ . Nie jest to jednak idealne rozwiązanie, ponieważ między dwoma elementami div pojawia się niewielka przerwa.

Innym sposobem rozwiązania problemu jest unoszenie obu elementów div. Zobacz http://jsfiddle.net/VptQm/ . To działa dobrze.

Ale moje pierwotne pytanie pozostaje. Dlaczego, skoro oba elementy div są przechowywane jako elementy inline-block, nie pasują obok siebie?

html css Lone Learner
źródło

Odpowiedzi:

139

Podczas korzystania z inline-blockelementów zawsze będzie istniał whitespace problem między tymi elementami (szerokość ta wynosi około ~ 4 piksele).

Więc twoje dwa divs, z których oba mają 50% szerokości, plus ten whitespace(~ 4px) ma ponad 100% szerokości, więc pęka. Przykład twojego problemu:

Pokaż fragment kodu

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>

Rozwiń fragment

Jest kilka sposobów, aby to naprawić:

1. Brak odstępu między tymi elementami

Pokaż fragment kodu

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>

Rozwiń fragment

2. Korzystanie z komentarzy HTML

Pokaż fragment kodu

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>

Rozwiń fragment

3. Ustaw rodziców font-sizena 0, a następnie dodaj wartość do inline-blockelementów

Pokaż fragment kodu

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>

Rozwiń fragment

4. Stosowanie między nimi ujemnego marginesu ( nie zalecane )

Pokaż fragment kodu

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>

Rozwiń fragment

5. Opadający kąt zamknięcia

Pokaż fragment kodu

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>

Rozwiń fragment

6. Pomijanie niektórych tagów zamykających HTML (dzięki @thirtydot za odniesienie )

Pokaż fragment kodu

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>

Rozwiń fragment

Bibliografia:

Jak @ MarcosPérezGude powiedział The najlepszym sposobem jest użycie remi dodać jakąś wartość domyślną font-sizena htmlznaczniku (jak w HTML5Boilerplate ). Przykład:

html{
    font-size: 1em;
}

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

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

Aktualizacja : ponieważ jest prawie 2018 r., Użyj flexboksa lub jeszcze lepiej - układu siatki CSS .

Vucko
źródło

3

@hoosierEE to nie jest nosense. Przestrzeń między elementami jest w porządku, ponieważ elementy inline-block będą pozycjonować się w wierszu tekstu. Jeśli wstawisz spację w linii, będzie spacja. Tak więc zachowanie jest prawidłowe, nawet jeśli uważasz, że to problem (jak Vucko nazywa to błędem).

Marcos Pérez Gude

2

Zgadzam się z @ MarcosPérezGude, to zachowanie jest poprawne. Jak widać w moim poście, istnieje kilka sposobów na usunięcie tej spacji (ja sam używam komentarzy HTML, aby usunąć spację). Ale jeśli przeszkadza, że białe miejsca, zawsze można użyć flexbox, table/table-row/table-celllub używanie float.

Vucko,

2

Doskonale używam bloków inline. Moje normalne podejście to parent { font-size:0; } child {font-size: 1rem; }. Z remami teraz jest najłatwiej

Marcos Pérez Gude

to trochę denerwujące, że tabulatory są nadal przetwarzane jako spacje. nigdy wcześniej nie widziałem, że porzucenie poprawki tagu zamykającego ma jakieś niestabilność lub skutki uboczne?

MintWelsh

Upewnij się również, że borderjest wyłączony. Może to zwiększyć przestrzeń, jeśli pływasz w elementach div.

evolross

22

dobra odpowiedź w css3 to:

white-space: nowrap;

w węźle nadrzędnym i:

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

w div (lub innym) przy 50%

przykład: http://jsfiddle.net/YpTMh/19/

EDYTOWAĆ:

jest inny sposób:

font-size: 0;

dla węzła nadrzędnego i nadpisz go w węźle podrzędnym

Matryca
źródło

7

Dzieje się tak, ponieważ biały znak między dwoma elementami div jest interpretowany jako spacja. Jeśli umieścisz <div>tagi w jednej linii, jak pokazano poniżej, problem zostanie rozwiązany :

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

Dan
źródło

4

Ponieważ między elementami jest przestrzeń. Jeśli usuniesz wszystkie spacje, będą pasować .

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

Michiel van Oosterhout
źródło

4

Albo spraw, by blokowały zamiast inline-block. Spowoduje to, że elementy div będą ignorować spacje między nimi.

display:block;

lub usuń odstępy między tagami

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

lub dodaj

margin: -1en;

do jednego z elementów div, aby złagodzić miejsce zajmowane przez pojedynczą renderowaną przestrzeń.

vittore
źródło

2

Sprawdź poniższy kod:

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>

Rozwiń fragment

Vaneet Thakur
źródło

2

Przykład Flexbox - zostanie użyty dla klasy nadrzędnej trzymającej dwa obok siebie elementy.

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

Zaczerpnięte ze środkowania elementu div w pionie wewnątrz innego elementu div

nbixler
źródło

1

Można to zrobić, dodając display: inline do elementu div, który zawiera elementy inline.

Podczas usuwania spacji za pomocą marginesu o wartości ujemnej konieczne staje się dodanie go do tego konkretnego elementu. Dodanie go do klasy wpłynie na miejsca, w których ta klasa była używana.

Więc bezpieczniej byłoby użyć display: inline;

Vish
źródło

0

dodaj float: left; do obu znaczników DIV.

div {
  float: left;
}

Rozwiń fragment

Tatenda
źródło