Hallo

ich habe folgendes HTML

<nav>
    <details>
      <summary class="popover-trigger">Menü &#x2630;</summary>
  <a href="HTTPS//:">Startseite</a><br>
  <a href="HTTPS//:">Aktuelles</a><br>
  <a href="HTTPS//:">Datenschutzhinweise</a><br>
  <a href="HTTPS//:">Impressum</a>
    </details>
</nav>

Wie kann ich dies unterdrücken und die Texte nebeneinander stellen, wenn Breite des Bildschirms größer xem?

Zusatzfrage: Wie kann ich das <br> vermeiden?

Fangen wir hinten an, weil mit dem Umbrüchen dein Wunsch der horizontalen Darstellung nicht erfüllbar ist. Die Links in einer Liste aufzuführen, macht den HTML-Umbruch obsolet.

<ul>
  <li><a href="HTTPS//:">Startseite</a></li>
  <li><a href="HTTPS//:">Aktuelles</a></li>
  <li><a href="HTTPS//:">Datenschutzhinweise</a></li>
  <li><a href="HTTPS//:">Impressum</a></li>
</ul>

Die Links werden nun nachwievor untereinander dargestellt. Die Listenpunktzeichen und die vordefinierte Einrückung lassen sich mit CSS entfernen.

Wenn du die Darstellung ab einer bestimmten Mindestbreite auf horizontal umschalten willst, bietet sich dazu ein Media-Query an.

/* Standardregeln für schmale Viewports und allgemeingültige Regeln */ 
@media screen and (min-width:38em) {
  /* abweichende Regeln für breitere Viewports */
  nav li { display: inline; }
}

Die im Beispiel gezeigte Breite(ngrenze) von 38em ist willkürlich gewählt. In dem Block kannst du jedenfalls die Umschaltung vornehmen. Mit display: inline; geht das am einfachsten. Allerdings hat man mit einer Flexbox auf die Liste an sich mehr Einflussmöglichkeiten auf die Darstellung der Listenpunkte. Das kommt dann auf die konkreten Anforderungen für dein Projekt an. Die kennen wir allerdings bis jetzt nicht.

Tschö, Auge