J'ai une mise en page comme celle-ci: lien de violon
entre .td est un espace blanc, même si la marge et le rembourrage est réglé sur 0. P>
Pourquoi cela se produit-il et comment résoudre ce problème? Marge négative-gauche peut-être? Ou de meilleures solutions? P>
<style>
.tr {
height: 20px;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
word-spacing: 0;
}
.td {
display: inline-block;
height: 20px;
margin: 0;
padding: 0;
}
</style>
<div class="tr" style="width: 150px;">
<div class="td" style="width: 50px; background-color: #CCC;"></div>
<div class="td" style="width: 50px; background-color: #AAA;"></div>
<div class="td" style="width: 50px; background-color: #666;"></div>
</div>
6 Réponses :
Utilisez le flotteur
.td {
float: left;
height: 20px;
margin: 0;
padding: 0;
}
J'utilisais du flotteur, mais il poussait la troisième boîte à une nouvelle ligne lorsque la largeur: 60px a été appliquée.
Oui, car la largeur du parent est inférieure à la largeur de combinaison des enfants afin que vous puissiez augmenter la largeur du parent ou vous pouvez commenter l'espace supplémentaire dans l'exemple de Divs inline: jsfiddle.net/bysmr/7
Vous pouvez également écrire sur la même ligne, mais il a l'air plus propre avec des commentaires. < HR> Solution 2: Ajouter Taille de la police: 0 à l'élément parent. N'oubliez pas de définir la taille de la police des éléments enfants:
Nice, solution 2 assez facile à mettre en œuvre, 1 up!
Lors de l'utilisation de HAML, je peux éviter que l'espace d'être rendue à l'intérieur et à l'extérieur de la balise avec % div <>
Les sapes / greames entre vos éléments en ligne-block sont affichés par le navigateur. Vous pouvez Supprimer-les , mais possible, il est possible d'utiliser une sorte de flottant sur votre classe TD.
Je ne sais pas quel type de données vous essayez d'afficher avec votre balisage, mais pour les données tabulaires, l'utilisation des tables est parfaitement recherchée! ;)
Les blocs en ligne sont traités comme des éléments en ligne si vides les séparent comme des mots habituels de l'élément parent.
Je propose 2 solutions:
Vous pouvez le réparer en supprimant des espaces entre Vous pouvez régler la taille de la police du conteneur sur 0 afin que les espaces ne soient pas perceptibles. De cette façon, vous ne modifierez pas le balisage HTML, seules les règles CSS. Exemple: http://jsfiddle.net/wc68h/
inline-block divs, comme celui-ci: http://jsfiddle.net/f3aku/
Pour surmonter ce problème, vous devez avoir votre DIV dans une ligne: espère que cela aide
Mon moyen préféré d'accomplir l'espace zéro entre les blocs en ligne était dans CSS, avec le parent ayant la taille de la police: 0 et enfant ayant la taille de la police: 16px . Cela dit, il y a quelques autres façons de le faire avec HTML et CSS. Voici un stylo vivant: