Frage zum Wiki-Artikel „Listen“

[Rolf B]

Hallo Q,

so ändert sich doch nichts an der Frage nach responsivem Ersatz.

Die stellst Du Dir alleine und wir haben Dir gesagt: Listen sind bereits responsiv.

Eine inline-Liste erzeugt man entweder mit display:flex auf dem ul/ol Element oder durch display:inline auf ul/ol und li. Die Listenpunkte kommen durch das display:inline auf den li automatisch weg, weil li per Default ein display:list-item hat und die Marker nur für List-Items erzeugt werden.

Etwas knifflig ist es allerdings, ul in ein p Element zu packen, weil ul eben flow content und kein phrasing content ist. Die Browser zicken da rum und beenden das p vor dem ul. Aber gut, das kann man umgehen. Schön ist zwar anders…

<div role="paragraph">
Ich packe mein Raumschiff und nehme mit:
<ul class="inline">
<li>einen Jean-Luc</li>
<li>eine Kathy</li>
<li>einen Continuum-Hopper</li></ul>. 
Sonst noch Fragen?
</div>

div[role=paragraph] { margin: 1em 0; }
ul.inline {
  padding: 0;
  display: inline;
  li { display: inline; 
    &::after { content: ", "; }
    &:nth-last-of-type(2)::after { content: " und "; }
    &:last-of-type::after { content: ""; }
  }
}

Ob sich das für einen Screenreader schön anhört, ist eine weitere Frage…

Rolf