Ich habe versucht, mithilfe von Klassen und IDs viele Dinge im CSS zu ändern, aber es scheint keine Möglichkeit zu geben, beide Bilder auf der anderen Seite des Bildschirms anzuzeigen (Logo ganz links, Profil aktiviert). ganz rechts).

Ich habe viele verschiedene Dinge wie text-align 和不同的 justify-contents ausprobiert, aber nichts scheint zu funktionieren.

Das ist der Code:

.top-nav {
  display: flex;
  position: absolute;
  background-color: blue;
  opacity: 0.5;
  height: 10%;
  top: 0;
  width: 100%;
  left: 0;
  padding: 0;
  border: 0;
  margin: 0;
  list-style: none;
}

.top-nav div {
  display: flex;
  justify-content: space-between;
  height: 100%;
  margin: 0px;
  padding: 0;
  border: 0;
  margin: 0;
}

<div class="top-nav">
  <div style="flex-grow: 1"><img src="/textures/logo.svg"></div>
  <div style="flex-grow: 1"><img src="/textures/profile.svg"></div>
</div>