I am trying to list navigation elements from left to right like this: Start Über Weitere Kontakt instead of this Start

Über

Weitere

Kontakt

but it doesn't seem to work. I have already tried using float: left; ,display:inline; and list-style: none; on #navigation li but it just stays the same.

This is the navigation structure in the index.html

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body header {
  top: 0;
  left: 0;
  display: flex;
  position: absolute;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 30px 100px;
}

#navigation {
  display: flex;
  justify-content: center;
  align-items: center;
}

#navigation li {
  display: inline;
  position: absolute;
}

<header>
  <a href="#" class="logo">Logo</a>
  <ul class="navigation">
    <li><a href="#">Start</a></li>
    <li><a href="#">Über</a></li>
    <li><a href="#">Weitere</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</header>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You have given ul a

But the problem is that in your CSS you are using the id selector #navigation

Jsut change it to class selector: .navigation

Also, to achieve your goal position is not required.

The Following Code is Sufficient.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.navigation {
  display: flex;
  align-items: center;
}

.navigation li {
  display: inline;
  padding: 0 10px;
}

<header>
  <a href="#" class="logo">Logo</a>
  <ul class="navigation">
    <li><a href="#">Start</a></li>
    <li><a href="#">Über</a></li>
    <li><a href="#">Weitere</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</header>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

If I understood right, here is the solution.

body {
  font-family: sans-serif;
  box-sizing: border-box;
}

header {
  display: flex;
  flex-direction: row;
}

.logo{
  margin: 0 30px 0 0;
}

.navigation {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
}

.navigation li {
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

<header>
  <div class="logo"><a href="#">Logo</a></div>
  <ul class="navigation">
    <li><a href="#">Start</a></li>
    <li><a href="#">Über</a></li>
    <li><a href="#">Weitere</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</header>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>