<ol><li>

[Gunnar Bittersmann]

@@Sophie

ich habe folgenden Aufbau

<ol class="breadcrumb">
			<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			    <a href="dashboard.php" itemprop="url">
			        <span itemprop="title">Home &raquo;</span>
			    </a>
			</li>
			<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			    <a href="javascript:void(0)" itemprop="url">
			         <span itemprop="title">Übersicht</span>
			    </a>
			</li>

			<li class="zurueck"><a href="javascript:history.back()">Zurück</a></li>
	</ol>

Ich würde jetzt gerne das Zurück ganz nach rechts bringen. Derzeit habe ich es über

li.zurueck {
    margin-left: 58em;
}

gelöst. Ist dieses aber wirklich die einzige Möglichkeit?

Dieses ist eher gar keine Möglichkeit. Magic numbers sind nie eine gute Idee. 58em passt vielleicht bei dir auf deinem System mit deiner Schriftart. Es gibt keine Garantie, dass das auch bei anderen passt. Ich würde eher garantieren, dass es das nicht tut.

.breadcrumb { display: flex }
.zurueck { margin-left: auto }

geht wohl in die Richtung, wie es aussehen soll. Ist aber nicht richtig, denn:

Warum soll „Zurück“ rechts stehen? Also in Leserichtung vorwärts? „Zurück“ gehört doch bei LTR-Leserichtung nach links.

Warum sollte es überhaupt einen Link „Zurück“ geben? Browser haben bereits einen „Zurück“-Button. Der sollte bekannt sein. Das Browser-UI auf einer Webseite nachzubauen müllt diese nur unnötig voll.

Zumal die Breadcrumb-Navigation doch schon eben gerade dazu dient, zurückzukommen.

Wenn es einen „Zurück“-Link geben soll, ist dieser kein Breadcrumb; gehört also nicht in die Liste.

<nav id="breadcrumb-nav">
  <ol>…</ol>
  <a href="javascript:history.back()">Zurück</a>
</nav>

mit

#breadcrumb-nav { display: flex }
#breadcrumb-nav > a { margin-left: auto }

---

Wo hast du denn http://data-vocabulary.org/Breadcrumb aufgegabelt? Das Vokabular wird wohl keine Maschine verstehen. Verwende Schema.org. Da heißt es BreadcrumbList.

Ich rate von der Verwendung von Microdata (itemscope, itemtype, itemprop) ab und empfehle stattdessen RDFa Lite (typeof, property).

LLAP 🖖