The structure of menu items should be inline . I am creating a manu and I have menu items (li list items). I want to create them inline . I want to display all menu items in one line . I don't want to display menu items in different line because Items are displaying in different line but I want to set inline .
I have menu items -
<li> Home </li>
<li> About </li>
<li> Contact </li>
These are simple HTML list . These display in different lines . I want to set these HTML list Items in one line (inline).
arnabisaha
(2.5K Points)
vishalrana1
(7.4K Points)
The CSS stylesheet is used to create menu list inline using display . You have to make menu Items inline using CSS class .
Let's create a class to make menu items inline .
<style>
.nav li{
display: inline;
padding:2px;
}
</style>
We have created a css with display inline attributes . This is called display inline css which is used to make div block , list li or other content inline . In the css class above , we have created padding between menu items .
<style>
.nav li{
display: inline;
padding:2px;
}
</style>
<ul class="nav">
<li> <a href="#">Home </a></li>
<li> <a href="#">About </a></li>
<li> <a href="#">Contact</a> </li></ul>
We use css class nav before menu list li . All menu items should be inside class nav .
shakti
(9.4K Points)
Inline CSS helps to arrange all menus items in one line . If you want to manage all items in one line using CSS then you should create css like this -
Inline CSS-
.class_name li{
display: inline;
}
In the example above , we declared class name with li list tag . You can set your css class name . In this way , you can make menu Items inline using inline css . This is known as inline group .
