CSS: Letztes Element auf der Leitung

Question

Ich habe eine ungeordnete [inline] Liste von Links bekommen, die sich über zwei Zeilen umbrochen:

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

ich den Punkt Separator über eine CSS-Pseudoelement hinzufügen:

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

Leider erscheint das Trennzeichen nach dem letzten Element in jeder Zeile. Mit nur einer Zeile würde ich einfach :last-child greifen und das psuedo-Element entfernen.

Irgendwelche raffinierten Tricks, um den letzten Punkt mit mehr als einer Linie zu verstecken? Ich bin offen für komisches CSS oder JavaScript, wenn es absolut notwendig ist.

Answer 1

Interessante Frage! Hier ist, was ich eine „low-tech“ Lösung mit jQuery betrachten, funktioniert der Trick:

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

Der Algorithmus ist nicht schwer zu folgen, aber hier ist die Idee: iterate über die Elemente, die Vorteile nehmen, die sie alle haben gleiche Eigenschaften (Größe, Rand, Inline-Anzeige usw.), die ihre Position beeinflussen, wenn der Browser das Layout berechnet. Vergleichen Sie den vertikalen Versatz jedes Artikels mit dem des vorherigen; Wenn sie sich unterscheiden, muss die vorherige Zeile am Ende der Zeile stehen, also markieren Sie sie für eine Sonderbehandlung. Schließlich markieren Sie auch das letzte Element in der Menge für die Sonderbehandlung, da es definitionsgemäß das letzte Element in der Zeile ist, auf dem es erscheint.

IMHO die Tatsache, dass dies eine Javascript-basierte Lösung ist (kann es ohne gemacht werden, frage ich mich?) Ist überhaupt kein Problem, da selbst wenn das Skript nicht läuft, wird es nur ein sehr geringes sein visuelle Verschlechterung Ihrer Webseite

See it in action.

Answer 2

Basierend auf der akzeptierte Antwort in Kaffee:

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

ich die gleiche Situation bin vor, und dies in einem ansprechenden Design zu tun. Hier ist meine CSS-Lösung.

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

Ich fand tatsächlich einen Fehler in Jon's solution: In dem seltenen Fall, dass zwei (oder mehr) li s auf eine Zeile passen würde, aber die beiden li s plus die Kugel würde nicht passen, sie würden ohne Kugel nebeneinander rendern. (. Dort die Kugel Nachdem ursprünglich würde bewirken, dass die beiden li s auf getrennten Leitungen sein, die Anwendung der Klasse nobullet und den Abstand zu reduzieren, Bewegen des zweiten li auf eine Linie)

Hier ist ein Beispiel für den Fehler: http://jsfiddle.net/W2ULx/61/ (Amtliche Bekanntmachung in der ersten Zeile, die letzten beiden li s render ohne Kugel zwischen ihnen.Das einzige, was von der ursprünglichen Geige geändert wird, ist die Breite der ul, um das Problem zu erzwingen.)

Die einfache Lösung fand ich war in der CSS-

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

zu

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

so dass statt den Abstand der Entfernung zu ändern, macht es nur unsichtbar. Alles, was zu einer neuen Linie gebrochen wäre, wird immernoch zu einer neuen Linie zerbrechen, anstatt von der entfernten Kugel eine Linie hochgezogen zu werden.

Answer 5

Hier ist eine JavaScript-Version der akzeptierte Antwort (Keine jQuery benötigt!):

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"; 
}); 

UPDATE

Hier ist eine andere Art und Weise, wenn Sie den Überblick über aktuelle Positionen des halten müssen Elemente in jeder Zeile (Gruppe):

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

Ich wollte eine Version t Hut wäre visuell zentriert und würde sich auch mit dem Neu-Layout-Fehler befassen, den Randall elegant gehandhabt hat. Diese Lösung fügt auch dem ersten Element jeder Zeile einen mittleren Punkt und ein Leerzeichen hinzu, der den mittleren Punkt und das Leerzeichen am Ende jeder Zeile ausgleicht. Sie können dies entfernen, wenn Sie das Menü nicht mehr ausrichten.

Ich wechselte auch zu Offset(). Links in den Code, weil Firefox nicht mit Offset() arbeitete.

Der Code ist unten, aber hier ist ein Link, so dass Sie es einfacher arbeiten sehen können. 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>