How to Display List Items in Columns with a Responsive Layout?

Displaying List Items as Columns in a Responsive Layout

Your goal of displaying list items vertically, depending on browser width, can be achieved using CSS3 columns. Here's how:

Using HTML, wrap your list items in a <div> with a fixed height and specify the number of columns using the column-count property:

<div>

In CSS, define the height of the container and ensure that each list item is displayed inline-block:

#limheight {
  height: 800px;
  column-count: 3;
}

#limheight li {
  display: inline-block;
}

When the browser is resized, CSS3 will automatically adjust the number of columns and rearrange the list items to optimize their display. The specific number of columns displayed will depend on the available width and the width of the list items themselves.

Using this technique, you can achieve a responsive layout where list items are displayed in a vertical line, with the columns adjusting dynamically based on the browser size.

The above is the detailed content of How to Display List Items in Columns with a Responsive Layout?. For more information, please follow other related articles on the PHP Chinese website!