una - ul li css style example
CSS-Línea vertical entre viñetas en una lista desordenada (4)
¿Cómo voy a dibujar una línea vertical entre las viñetas en una lista desordenada, así:
Observe que la línea se detiene en la última viñeta de la lista. Estoy usando list-style:none; e imágenes como balas. El HTML se ve así:
<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>
...
Código CSS según lo solicitado:
/* 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;
}
Dudo que esto sea posible usando solo fronteras y "jugando con los márgenes" como otros han sugerido, al menos no he tenido suerte al hacerlo.
Esta solución utiliza contenido generado por CSS ( :before y :after ) para dibujar viñetas y líneas. Permite un alto grado de personalización y mantiene el marcado limpio, pero tenga en cuenta el soporte del navegador .
JSFiddle (desplazarse por CSS hasta /* BORDERS AND BULLETS */ comment)
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 */
}
NOTA: si el border-color del border-color la línea tiene un canal alfa especificado, la superposición entre los bordes del primer y segundo elemento será notable.
Necesita agregar un div interno y externo y luego jugar con los márgenes. Esto es lo que quiero decir
DEMO: 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;
}
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;
}
Y luego solo usaría relleno y márgenes para alinearlo y para evitar que el último se extienda:
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;
}
El último selector secundario no funciona en las versiones de IE <7
Probablemente un poco viejo ahora, pero aquí hay una forma de que puedas hacer esto. Requiere un poco más de marcado para crear estilos y controlar las alturas de los elementos (utilicé tramos pero puede usar etiquetas):
ol,
ul {
list-style: none;
}
li {
display: flex;
flex-flow: row;
min-height: 100px;
position: relative;
}
span.number {
margin-right: 100px;
text-align: center;
width: 1em;
height: 1em;
background-color: red;
border-radius: 50%;
z-index: 1;
}
span.line {
position: absolute;
height: 100%;
border: solid black 0.1em;
top: 0.5em;
left: 0.45em;
}
li:last-child span.line {
display: none;
}
}
span.blob {}
<ul>
<li><span class=''line''></span><span class=''number''>1</span>
<div class=''blob''>Hello</div>
</li>
<li><span class=''number''>2</span>
<div class=''blob''>Goodbye</div>
</li>
</ul>