Skip to Content
Boundaries and Space
Keep It Inline

Display types can be overwritten in CSS by using the display property.

For example, we can make list items appear on the same line by setting display to inline:

li { display: inline; }

Note: Below, we will encounter an HTML nav element. Navs are used to organize site navigation menus on a webpage.



On the Tundra Gallery homepage, notice the navigation bar (navbar) on the bottom left.

In index.html, this is represented by a nav element containing a ul with three list items. Read through the HTML and locate this code.

In main.css locate the nav li selector. Give it a display property of inline.

Run your code and notice the change in the web browser. List items, which are normally displayed as block-level elements, display inline within the navigation.

Folder Icon

Take this course for free

Already have an account?