Deux éléments inline-block, d'une largeur de 50 % chacun, ne tiennent pas côte à côte sur une seule ligne.

Question

Deux éléments inline-block, d'une largeur de 50 % chacun, ne tiennent pas côte à côte sur une seule ligne.

Demandé el 15 de Août, 2013: Quand la question a-t-elle été
64682 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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

Le code ci-dessus tente de placer la division #left et la division #right, côte à côte, sur une seule ligne. Mais comme vous pouvez le voir dans l'URL JSFiddle ci-dessus, ce n'est pas le cas.

Je parviens à résoudre le problème en réduisant la largeur de l'une des divisions à 49 %. Voir http://jsfiddle.net/mUKSC/ . Mais ce n'est pas une solution idéale car un petit espace apparaît entre les deux divs.

Une autre façon de résoudre le problème est de faire flotter les deux divs. Voir http://jsfiddle.net/VptQm/ . Cela fonctionne bien.

Mais ma question initiale demeure. Pourquoi, lorsque les deux divs sont conservés en tant qu'éléments inline-block, ils ne tiennent pas côte à côte ?

Demandé el 15 de Août, 2013 par Lone Learner

Answer 1

5 Réponses

Answer 2

151voto

Vucko Points 4692

Mise à jour : comme c'est 2021, utilisez flexbox ou encore mieux - Mise en page de la grille CSS au lieu de inline-block .

Lorsque vous utilisez inline-block il y aura toujours un élément whitespace question entre ces éléments (cet espace fait environ ~ 4px de large).

Donc, vos deux divs qui ont tous deux une largeur de 50 %, et que whitespace (~ 4px) est plus de 100% en largeur, et donc il se casse. Exemple de votre problème :

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>

Il y a plusieurs façons de résoudre ce problème :

1. Pas d'espace entre ces éléments

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>

2. Utiliser les commentaires HTML

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>

3. Définir les parents font-size a 0 puis en ajoutant une valeur à inline-block éléments

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>

4. En utilisant une marge négative entre eux ( non souhaitable )

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>

5. Baisse de l'angle de fermeture

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>

6. Sauter certains Balises de fermeture HTML (merci @thirtydot pour le référence )

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>

Références :

En @MarcosPérezGude a déclaré El meilleur est d'utiliser rem et ajouter une valeur par défaut à font-size sur le html (comme dans HTML5Boilerplate ). Exemple :

html{
    font-size: 1em;
}

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

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

Répondu el 15 de Août, 2013 par Vucko (4692 Points )

Answer 3

27voto

Matrix Points 81

La bonne réponse en css3 est :

white-space: nowrap;

dans le nœud parent, et :

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

en div (ou autre) à 50

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

EDIT :

il existe un autre moyen avec :

font-size: 0;

pour le noeud parent et le remplacer dans le noeud enfant

EDIT 2021 : personnellement, je recommande d'utiliser flexbox maintenant : https://the-echoplex.net/flexyboxes/

Répondu el 3 de Février, 2015 par Matrix (81 Points )

Answer 4

7voto

Dan Points 1376

C'est parce que l'espace blanc entre vos deux divs est interprété comme un espace. Si vous mettez votre <div> en ligne, comme indiqué ci-dessous. le problème est corrigé :

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

Répondu el 15 de Août, 2013 par Dan (1376 Points )

Answer 5

4voto

vittore Points 8364

Soit les faire en bloc au lieu d'en ligne-bloc. Cela rendra les divs en ignorant les espaces entre eux.

display:block;

ou supprimer les espaces entre les balises

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

ou ajouter

margin: -1en;

à l'un des divs afin d'atténuer l'espace pris par le rendu à espace unique.

Répondu el 15 de Août, 2013 par vittore (8364 Points )

Answer 6

4voto

michielvoo Points 15413

Parce qu'il y a un espace entre les éléments. Si vous enlevez tous les espaces, ils s'adapteront .

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

Répondu el 15 de Août, 2013 par michielvoo (15413 Points )

Deux éléments inline-block, d'une largeur de 50 % chacun, ne tiennent pas côte à côte sur une seule ligne.

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Deux éléments inline-block, d'une largeur de 50 % chacun, ne tiennent pas côte à côte sur une seule ligne.

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: