CSS - ligne Verticale entre les puces dans une liste non triée

Comment pourrais-je aller sur le dessin d'une ligne verticale entre les puces dans une liste non ordonnée, comme suit:

CSS - ligne Verticale entre les puces dans une liste non triée

Avis que la ligne s'arrête à la dernière liste de balle. Je suis en utilisant list-style:none; et des images comme des puces. Le code HTML ressemble à ceci:

<ul class="experiences">

  <!-- Experience -->
  <li class="green">
    <div class="where">New York Times</div>
    <h3 class="what green">Senior Online Editor</h3>
    <div class="when">2012 - Present</div>

    <p class="description">Jelly-o pie chocolate cake...</p>
   </li>

   ...

Code CSS comme demandé:

/* Experiences */
ul.experiences {
    padding-left: 15px;
    margin-top: -1px;
}
ul.experiences li {
    padding-left: 33px;
    margin-bottom: 2.5em;
    list-style: none;
    background: url('../img/misc/list-bullet-darkgray.png') no-repeat;
}
ul.experiences li.green {
    background: url('../img/misc/list-bullet-green.png') no-repeat;
}
ul.experiences li.blue {
    background: url('../img/misc/list-bullet-blue.png') no-repeat;
}
ul.experiences li.pink {
    background: url('../img/misc/list-bullet-pink.png') no-repeat;
}
.where {
    font-size: 1.2857em; /* 18/16 -> 18px */
    font-weight: 300;
    display: inline;
    margin-right: 0.5em;
}
.what {
    font-size: 0.75em; /* 12/16 -> 12px */
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background-color: #444444;
    display: inline-block;
    padding: 0 12px;
    margin: -5px 0.5em 0 0 !important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.what.green {
    background-color: #c4df9b;
}
.what.blue {
    background-color: #6dcff6;
}
.what.pink {
    background-color: #f06eaa;
}
.when {
    float: right;
    color: #b9b9b9;
    font-style: italic;
}
.description {
    display: block;
    margin-top: 0.5em;
}
votre code css merci
Je crois que vous pouvez utiliser .experiences li:last-child à -ne - pas d'affichage de gauche de la frontière alors que vous pouvez utiliser .experiences li pour afficher une bordure sur le côté gauche du reste
De cette façon, la frontière n'irai pas jusqu'à la dernière balle.
Alors, avez-vous résolu ce problème? Si vous avez utilisé une solution fournie sur cette page, pensez à le marquer comme réponse.
Désolé pour le retard, je n'ai pas eu le temps de regarder pendant un moment. Voir mon commentaire de votre réponse.

OriginalL'auteur transbetacism | 2013-07-13

  1. 19

    Je doute que cela soit réalisable en utilisant seulement les frontières et les "jongler avec des marges" comme d'autres l'ont suggéré, au moins je n'ai pas eu la chance de le faire.

    Cette solution utilise les feuilles de style CSS contenu généré (:before et :after) pour tirer des balles et des lignes. Il permet de
    un degré élevé de personnalisation et il garde le balisage propre, mais la remarque la prise en charge du navigateur.

    JSFiddle (faites défiler CSS jusqu'à ce que le /* BORDERS AND BULLETS */ commentaire)

    ul.experiences li {
    position:relative; /* so that pseudoelements are positioned relatively to their "li"s*/
    /* use padding-bottom instead of margin-bottom.*/ 
    margin-bottom: 0; /* This overrides previously specified margin-bottom */
    padding-bottom: 2.5em;
}

ul.experiences li:after {
    /* bullets */
    content: url('http://upload.wikimedia.org/wikipedia/commons/thumb/3/30/RedDisc.svg/20px-RedDisc.svg.png');
    position: absolute;
    left: -26px; /*adjust manually*/
    top: 0px;
}

ul.experiences li:before {
    /* lines */
    content:"";
    position: absolute;
    left: -16px; /* adjust manually */
    border-left: 1px solid black;
    height: 100%;
    width: 1px;
}

ul.experiences li:first-child:before {
   /* first li's line */
   top: 6px; /* moves the line down so that it disappears under the bullet. Adjust manually */
}

ul.experiences li:last-child:before {
    /* last li's line */
   height: 6px; /* shorten the line so it goes only up to the bullet. Is equal to first-child:before's top */
}

    REMARQUE: si la ligne est border-color a un alpha-canal spécifié, le chevauchement entre les premier et deuxième éléments de frontières sera perceptible.

    Cela semble être au travail de la great - sauf pour IE8 qui montre la ligne pour le dernier point... Est-il un moyen de contourner cela? Je vais accepter cette réponse si je l'obtenir pour fonctionner avec IE8. Regardez cet exemple avec IE8: graphic-dev.com/stuff/vcard
    Je n'ai pas trouvé le moyen de soutenir IE8 ici purement avec les CSS. La meilleure solution consiste à utiliser jQuery (puisque vous aurez probablement l'utiliser sur la page de toute façon). Il a un :last-child sélecteur, qui peut être utilisé pour attribuer une classe spécifique pour le dernier enfant, par exemple experiences-last-li. Puis modifier la dernière règle du sélecteur de ul.experiences li:last-child:before à ul.experiences li.experiences-last-li:before. N'oubliez pas d'ajouter un commentaire dans le source pour expliquer la nécessité de cette solution de contournement!
    EDIT: Fonctionne comme un charme! Pourquoi n'ai-je pas penser que...? 🙂 Merci beaucoup!
    Merci mec. Il m'a sauvé la moitié de la journée de travail. Cheers :+1:

    OriginalL'auteur sbichenko

  2. 1

    Car il n'y a pas beaucoup de bonnes réponses ici, j'ai pensé que je voudrais ajouter ma solution:

    Je profite de la position relative et comprennent un masque blanc sur le dernier élément à masquer le dépassement de capacité. Travaux en vue de téléphone portable et variation de l'élément hauteurs.

    CSS - ligne Verticale entre les puces dans une liste non triée

    HTML

    <div class="list-wrapper">

    <div class="red-line"></div>

    <div class="list-item-wrapper">
        <div class="list-bullet">1</div>
        <div class="list-item">
            <div class="list-title">ITEM</div>
            <div class="list-text">Text</div>
        </div>
    </div>

    <div class="list-item-wrapper">
        <div class="list-bullet">2</div>
        <div class="list-item">
            <div class="list-title">ITEM</div>
            <div class="list-text">Text</div>
        </div>
    </div>

    <div class="list-item-wrapper">
        <div class="list-bullet">3</div>
        <div class="list-item">
            <div class="list-title">ITEM</div>
            <div class="list-text">Text</div>
        </div>
        <div class="white-line"></div>
    </div>

</div>

    CSS

    .list-wrapper {
  position:relative;
}
.list-item-wrapper {
  margin-top:10px;
  position:relative;
}
.list-bullet {
  float:left;
  margin-right:20px;
  background:#FF4949;
  height:30px;
  width:30px;
  line-height:30px;
  border-radius:100px;
  font-weight:700;
  color:white;
  text-align:center;
}
.list-item {
  display:table-row;
  vertical-align:middle;
}
.list-title {
    font-weight:700;
}
.list-text {
    font-weight:400;
}
.red-line {
  background:#FF4949;
  z-index:-1;
  width:1px;
  height:100%;
  position:absolute;
  left:15px;
}
.white-line {
  background:#FFF;
  z-index:-1;
  top:0px;
  width:1px;
  height:100%;
  position:absolute;
  left:15px;
}

    DÉMO
    http://jsfiddle.net/cfzsgkyn/

    OriginalL'auteur BuffMcBigHuge

  3. -1
    ul.experiences li {
    padding-left: 33px;
    margin-bottom: 2.5em;
    list-style: none;
    background: url('../img/misc/list-bullet-darkgray.png') no-repeat;
    border-left: 1px solid #yourcolor;
}

    Et ensuite, je voudrais juste utiliser le rembourrage et les marges d'aligner et de cesser de le dernier de s'étendre: 

    ul.experiences li:last-child {
    padding-left: 33px;
    margin-bottom: 2.5em;
    list-style: none;
    background: url('../img/misc/list-bullet-darkgray.png') no-repeat;
    border-left: none;
}

    Le dernier sélecteur d'enfant ne fonctionne pas dans les versions de IE < 7

    DÉMO

    Actuellement, cette solution ressemble à ceci: s18.postimg.org/jok2ljwzd/line.png Comme vous pouvez le voir, il ya un couple de questions. L'espace blanc entre les éléments de la liste pourrait être possible de fixer en utilisant le rembourrage au lieu de la marge, mais je ne sais pas si c'est optimal... Aussi, je ne veux pas la ligne de prolonger encore un pixel au-dessus de la première puce ou au-dessous de la dernière...
    ensuite, vous devez jouer avec des remplissages, des marges et de la compensation de l'image d'arrière-plan de la puce donc toutes les lignes. Son délicat mais à l'aide d'une frontière est la meilleure solution.

    OriginalL'auteur 1321941

  4. -1

    Vous devez ajouter une intérieure et outter div et puis jouer avec les marges. Voici ce que je veux dire

    DÉMO: http://jsfiddle.net/kevinPHPkevin/N9svF/

    ul {
    padding-left:14px;
    margin-top:-6px;
    margin-bottom:-6px;
    padding-bottom:0;
}
#mainDiv {
    height: 200px;
    width:200px;
    position: relative;
}
#borderLeft {
    border-left: 2px solid #f51c40;
    position: absolute;
    top: 25px;
}
    Je ne pense pas que cela va fonctionner. Vous êtes à l'aide d'un négatif en bas de la marge pour s'assurer que la ligne ne s'étend pas au-dessous de la dernière balle, mais il n'y a aucun moyen de savoir quelle est la hauteur de la dernière li élément sera. Voir cet exemple où j'ai deux lignes de contenu pour la dernière li élément: jsfiddle.net/N9svF/3
    LES TRAVAUX DE CETTE. Cependant, vous devez ajouter un négatif de la marge de gauche de la liste des éléments. Comme ceci: li {margin-left:-5px;}

    OriginalL'auteur Kevin Lynch