2010-12-11 2 views
0

J'ai une liste qui ressemble à ceciCSS - deux espacement liste des colonnes

-------------------- 
|  |   | 
| 1 | 2 | 
|  |   | 
| 3 | 4 | 
|  |   | 
| 5 | 6 | 
|  |   | 
-------------------- 

(c'est un simple <ul> avec <li> « s)

le récipient de cette liste, nous allons l'appeler div.wrap a largeur fixe comme 400 pixels, et les éléments de liste sont flottants à gauche avec 50% largeur.

Comment puis-je ajouter un espacement de 10 pixels entre les éléments de la liste de gauche et de droite, sans visser la mise en page? Notez que je ne contrôle pas le code HTML à partir de la liste, je ne peux pas ajouter des cours à ces éléments de la liste :(

J'ai essayé avec margin-right: 10px sur les « s et margin-right: -10px<li> sur le <ul> mais doesn 't travail :)

Répondre

2

An example with margin-right.

modifier
Si vous souhaitez masquer la deuxième marge, vous pouvez faire ul un peu plus grand que son trop-plein d'enveloppement et de se cacher:
http://jsfiddle.net/YBy2K/3/

Pas très élégant, mais assez simple.

+0

oui, mais cela ajoute également de la marge à la 2ème colonne. c'est pourquoi j'essaie d'éviter :) – Alex

+0

aussi la largeur de l'élément li doit être en pourcentages, car la largeur du conteneur peut être modifiée, même si elle est corrigée. – Alex

+0

Ok, laissez-moi essayer à nouveau ... –

Questions connexes