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.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?