How to change vertical arrangement into horizontal arrangement in css

There are two ways to convert a vertical list into a horizontal list. Use inline or float list items.

Both methods are fine, but if you want links to have the same size, you have to use the float method.

Inline list items

One way to create a horizontal navigation bar is to specify the element,

Instance

li{
    display:inline;
}

display :inline; - By default, the 25edfb22a4f469ecb59f1190150159c6 element is a block element. Here we remove the newlines before and after each list item to display a single line.

Floating list items

In the above example the links have different widths.

For all links to be of equal width, float the 25edfb22a4f469ecb59f1190150159c6 element and specify the width of the 3499910bf9dac5ae3c52d5ede7383485 element:

Example

li{
    float:left;
}
a{
    display:block;
    width:60px;
}

float:left - use Slides of floating block elements next to each other

display:block - displays links to block elements, making the whole clickable link area (not just the text), it allows us to specify the width

width:60px - The maximum width of block elements by default. We want to specify a width of 60 pixels

The above is the detailed content of How to change vertical arrangement into horizontal arrangement in css. For more information, please follow other related articles on the PHP Chinese website!