CSS: Display li elements side by side

The li elements are block elements by default and are therefore displayed one below the other. With display: inline or display: inline-block you can change this property and display the elements inline next to each other:

li {
  display: inline-block;
}

At this point it makes sense to change also some other formatting:

li {
  display: inline-block;
  list-style-type: none;
  padding-right: 10px;
}

With this, we make sure that in addition to the display next to each other, the bullets in front of the list entries disappear and there is a little distance between the items.

@media (max-width: 600px) {
  li {
    display: inline-block;
    list-style-type: none;
    padding-right: 10px;
  }
}

You said you only want to apply the li-change when the page width in the browser decreases. You can do that as shown in the last example. With that CSS, the list formatting becomes active only with a window width smaller than 600px.
2018-04-21 at 21:09