CSS: último elemento en la línea

Question

tengo una lista desordenada [en línea] de enlaces que envuelve a través de dos líneas:

<ul> 
    <li><a href="http://google.com">Harvard Medical School</a></li> 
    <li><a href="http://google.com">Harvard College</a></li> 
    ... 
</ul> 

añado el punto de separación a través de un pseudo-elemento CSS:

#widget-links li { display: inline; } 
#widget-links li:after { content: " \00b7"; } 

Desafortunadamente, el separador aparece después del último elemento en cada línea. Con solo una línea, simplemente agarraría :last-child y eliminaría el elemento psuedo.

¿Algún truco ingenioso para ocultar ese último punto con más de una línea? Estoy abierto a CSS extraño o JavaScript si es absolutamente necesario.

Answer 1

¡Pregunta interesante! Esto es lo que considero una solución "baja tecnología" con jQuery que hace el truco:

$(function() { 
    var lastElement = false; 
    $("ul > li").each(function() { 
     if (lastElement && lastElement.offset().top != $(this).offset().top) { 
      lastElement.addClass("nobullet"); 
     } 
     lastElement = $(this); 
    }).last().addClass("nobullet"); 
});​ 

El algoritmo no es difícil de seguir, pero aquí está la idea: iterar sobre los elementos, aprovechando que todos ellos tienen la mismas propiedades (tamaño, margen, visualización en línea, etc.) que afectan su posición cuando el navegador calcula el diseño. Compare el desplazamiento vertical de cada elemento con el del anterior; si difieren, el anterior debe haber estado al final de la línea, así que márquelo para un tratamiento especial. Finalmente, marque también el último elemento del conjunto para un tratamiento especial, ya que, por definición, es el último elemento en la línea en la que aparece.

En mi humilde opinión, el hecho de que se trata de una solución basada en Javascript (¿puede hacerse sin, me pregunto?) No es ningún problema aquí, ya que incluso si el script no se ejecuta solo va a ser extremadamente leve Degradación visual de su página web.

See it in action.

Answer 2

Sobre la base de la respuesta aceptada en el café:

do lastinline = -> 
     $('[lastinline]').each -> 
      $parent = $ @ 
      lastElement = false 
      $parent.find('> *').each -> 
       $child = $ @ 
       if lastElement && lastElement.offset().top != $child.offset().top 
        lastElement.addClass "last-in-line" 
       lastElement = $child 

      .last().addClass "last-in-line" 

$(window).on 'resize', lastinline 

Answer 3

Estoy frente a la misma situación, y hacer esto en un diseño de respuesta. aquí está mi solución CSS única.

div { 
 
    overflow: hidden; 
 
    margin: 1em; 
 
} 
 
div ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin-left: -4px; 
 
} 
 
div ul li { 
 
    display: inline; 
 
    white-space: nowrap; 
 
} 
 
div ul li:before { 
 
    content: " \00b7"; 
 
}

<div> 
 
    <ul> 
 
    <li>item 1</li> 
 
    <li>item B</li> 
 
    <li>item 3</li> 
 
    <li>item IV</li> 
 
    <li>the long item</li> 
 
    <li>item 6</li> 
 
    <li>item 7</li> 
 
    <li>item awesome</li> 
 
    <li>give me your money</li> 
 
    <li>contact</li> 
 
    <li>menu item more</li> 
 
    <li>CSS is awesome</li> 
 
    <li>CSS3 is great</li> 
 
    <li>more</li> 
 
    <li>last item</li> 
 

 
    </ul> 
 
</div>

here it is as a fiddle too

Answer 4

realidad me encontré con un defecto en Jon's solution: En la rara situación en la que dos (o más) li s encajarían en una fila, pero los dos li s plus la bala no cabría, se rendirían una junto a la otra sin bala. (. Tener la bala allí originalmente haría que los dos li s para estar en líneas separadas, la aplicación de la clase nobullet y la reducción de la separación, moviendo el segundo li una línea)

Aquí está un ejemplo de la falla: http://jsfiddle.net/W2ULx/61/ (Aviso en la primera línea, los dos últimos li se muestran sin ninguna viñeta entre ellos. Lo único que se cambió del violín original es el ancho de ul para forzar el problema.)

La solución más sencilla que encontré fue a cambiar en el CSS

ul li.nobullet:after { content: none; } 

a

ul li.nobullet:after { color: transparent; } 

de manera que en lugar de eliminar la separación, sólo hace que sea invisible. Cualquier cosa que se hubiera roto en una nueva línea todavía se romperá en una nueva línea, en lugar de ser empujada hacia arriba por la bala eliminada.

Answer 5

Aquí hay una única JavaScript versión de la respuesta aceptada (Sin jQuery necesita!):

document.addEventListener("DOMContentLoaded", function(event) { 
    var lastElement = false; 
    var els = document.querySelectorAll('ul li'); 
    for(var i = 0; i < els.length; i++){ 
     var el = els[i]; // current element 
     if (lastElement && lastElement.offsetTop !== el.offsetTop) { 
      lastElement.className += " nobullet"; 
     } 
     lastElement = el; 
    } 
    els[els.length - 1].className += " nobullet"; 
}); 

ACTUALIZACIÓN

Ésta es otra manera si necesita hacer un seguimiento de las posiciones reales de la elementos en cada línea (grupo):

var i = 0; 
var j = 0; 
var keys = []; 
var groupsList = []; 
$("ul li").each(function() { 
    var topOffset = $(this).offset().top; 
    if(Array.isArray(groupsList[topOffset])) { 
     groupsList[topOffset].push(i); 
    } else { 
     if(j > 0) { 
      var lastElementIndexOnRow = groupsList[keys[j-1]][groupsList[keys[j-1]].length - 1]; 
      $($('ul li').get(lastElementIndexOnRow)).addClass('nobullet'); 
     } 
     groupsList[topOffset] = []; 
     groupsList[topOffset].push(i); 
     keys.push(topOffset); 
     j++; 
    } 
    i++; 
}).last().addClass("nobullet"); 

Answer 6

Yo quería una versión t El sombrero se centraría visualmente y también se ocuparía del error de rediseño que Randall manejó elegantemente. Esta solución también agrega un punto medio y espacio al primer elemento en cada línea, lo que contrarresta el punto medio y el espacio al final de cada línea. Es posible que desee eliminar esto si alineó a la izquierda su menú.

También cambié a offset(). A la izquierda en el código porque Firefox no estaba trabajando con offset(). Arriba.

El código está debajo, pero aquí hay un enlace para que pueda verlo funcionar más fácilmente. http://kpao.typepad.com/files/middle-dot-separated-list-v2.html

<html> 
<head> 
<title>Wildlife Conservation Network programs menu</title> 
<style> 
body, div, p, div, li, a {font-family:"Avenir Next","Segoe UI",sans-serif; font-size:15px;} 
a {color:royalblue; text-decoration:none;} 
a:hover, a:active {text-decoration:underline;} 
ul.menu {background-color:#f2f2f2; text-align:center; padding:1em 0; margin:0;} 
ul li {display:inline; white-space:nowrap;} 
ul li::before {content:""; padding-right:3px;} 
ul li::after {content:"\00a0\00b7"; padding-left:3px;} 
ul li.firstdot::before, ul li:first-child::before {content:"\00b7\00a0"; color:transparent;} 
ul li.lastdot::after, ul li:last-child::after {color:transparent;} 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
function midDotIt() { 
    var lastElement = false; 
    $("ul li").each(function() { 
     if (lastElement && lastElement.offset().left > $(this).offset().left) { 
      $(lastElement).addClass("lastdot"); 
      $(this).addClass("firstdot"); 
     } else if (lastElement) { 
      $(lastElement).removeClass("lastdot"); 
      $(this).removeClass("firstdot"); 
     } 
     lastElement = $(this); 
    }); 
} 
</script> 
</head> 
<body onload="midDotIt();" onresize="midDotIt();"> 

<ul class="menu"> 
<li><a href="https://wildnet.org/wildlife-programs/african-wild-dog">African Wild Dog</a></li> 
<li><a href="https://wildnet.org/wildlife-programs/andean-cat">Andean Cat</a></li> 
<li><a href="https://wildnet.org/wildlife-programs/cheetah-botswana">Cheetah - Botswana</a></li> 
<li><a href="https://wildnet.org/wildlife-programs/cheetah-namibia">Cheetah - Namibia</a></li> 
<li><a href="https://wildnet.org/wildlife-programs/cotton-top-tamarin">Cotton-Top Tamarin</a></li> 
<li><a href="https://wildnet.org/wildlife-programs/elephant">Elephant</a></li> 
<li><a href="https://wildnet.org/wildlife-programs/elephant-crisis-fund">Elephant Crisis Fund</a></li> 
<li><a href="https://wildnet.org/wildlife-programs/ethiopian-wolf">Ethiopian Wolf</a></li> 
<li><a href="https://wildnet.org/wildlife-programs/grevys-zebra">Grevy&#039;s Zebra</a></li> 
<li><a href="https://wildnet.org/wildlife-programs/lion-ewaso">Lion - Ewaso</a></li> 
<li><a href="https://wildnet.org/wildlife-programs/lion-niassa-0">Lion - Niassa</a></li> 
<li><a href="https://wildnet.org/wildlife-programs/lion-recovery-fund">Lion Recovery Fund</a></li> 
<li><a href="https://wildnet.org/wildlife-programs/okapi">Okapi</a></li> 
<li><a href="https://wildnet.org/wildlife-programs/penguin">Penguin</a></li> 
<li><a href="https://wildnet.org/wildlife-programs/saiga-antelope">Saiga Antelope</a></li> 
<li><a href="https://wildnet.org/wildlife-programs/sharks-rays">Sharks and Rays</a></li> 
<li><a href="https://wildnet.org/wildlife-programs/small-wild-cats">Small Wild Cats</a></li> 
<li><a href="https://wildnet.org/wildlife-programs/snow-leopard">Snow Leopard</a></li> 
<li><a href="https://wildnet.org/wildlife-programs/spectacled-bear">Spectacled Bear</a></li> 
<li><a href="https://wildnet.org/what-we-do/scholarships">Scholarship Program</a></li> 
</ul> 
</body> 
</html>