Marge indésirable dans la grille

Quick question CSS que je ne peux pas comprendre ... et je suis un peu surpris que je ne peux pas. J'essaie de créer une grille 2X2 de 4 boîtes qui se touchent sans marge entre les deux; voir l'image:Marge indésirable dans la grille

2x2 grid

Cependant, quand je mets en œuvre le code ci-dessous, je reçois une ligne verticale au milieu que je ne peux pas me débarrasser.

Voici mon code:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#dash-container { 
    width: 209px; 
} 
.dash-object { 
    display: inline-block; 
    height: 100px; 
    text-align: center; 
    vertical-align: middle; 
    width: 100px; 
} 
#dash-edit{background:#FF7700;} 
#dash-conference{background: #55bbff;} 
#dash-upgrade{background: #333333;} 
#dash-logo{background: #ffff00;} 
</style> 
</head> 
<div id="dash-container"> 
<div id="dash-logo" class="dash-object"><span>Logo</span></div> 
<div id="dash-conference" class="dash-object">Conference</div> 
<div id="dash-edit" class="dash-object">Edit</div> 
<div id="dash-upgrade" class="dash-object">Upgrade</div> 
</div> 
</html>

Si vous voulez jouer avec le html, vous pouvez find it here.

Merci pour les pointeurs.

Source

2013-10-15 neanderslob

Au lieu de faire 'display: inline-block', essayez' float: left'. Je n'aime pas utiliser les flotteurs et je vous conseille de les éviter autant que vous pouvez, dans certains cas, ils fonctionnent. – ODelibalta

Les éléments en ligne sont sensibles aux espaces blancs. Retirer le:

<div id="dash-container"> 
    <div id="dash-logo" class="dash-object"><span>Logo</span></div><div id="dash-conference" class="dash-object">Conference</div> 
    <div id="dash-edit" class="dash-object">Edit</div><div id="dash-upgrade" class="dash-object">Upgrade</div> 
</div>

jsFiddle example

Ou en utilisant les balises de commentaire HTML:

<div id="dash-container"> 
    <div id="dash-logo" class="dash-object"><span>Logo</span> 
    </div><!-- 
    --><div id="dash-conference" class="dash-object">Conference</div> 
    <div id="dash-edit" class="dash-object">Edit</div><!-- 
    --><div id="dash-upgrade" class="dash-object">Upgrade</div> 
</div>

jsFiddle example

Ou par flottage divs intérieur:

#dash-container div { 
    float:left; 
}

jsFiddle example

Source

2013-10-15 18:40:07 j08691

Ohhh n'est pas si chouette! Travaillé comme vous l'avez dit; Merci beaucoup. – neanderslob

Marge indésirable dans la grille

Répondre

Questions connexes