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
Floating list items
In the above example the links have different widths.
For all links to be of equal width, float the
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
