0 0 Votes

CSS: Display li elements side by side

Question by Guest | 21/04/2018 at 09:37

I would like to format the li elements of a ul list with CSS so that they appear next to each other instead of under each other.

Sense of the thing is that I want to make my website responsive and the list should, as soon as the page becomes smaller, no longer be displayed at the side but next to each other over the content.

ReplyPositiveNegative

Stefan Trost

Show Profile | Message
Avatar
0Best Answer
0 Votes

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.
21/04/2018 at 21:09

ReplyPositive Negative
Reply

Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own articles on askingbox.com. How to do.