89.9k views
2 votes
Navigation List At the bottom of the cw_home.html page is a navigation list with the id #bottom containing several ul elements. Sofia wants these ul elements laid out side-by-side. Open the cw_styles.css file and create a style rule for the bottom navigation list displaying it as a flexbox row with no wrapping. Set the justify-content property so that the flex items are centered along the main axis.

User MStrutt
by
5.7k points

1 Answer

1 vote

Answer:

cw_home.html

<html>

<head>

<link rel="stylesheet" href="cw_style.css">

</head>

<body>

<nav id="bottom">

<ul >

<li>Nav 1</li>

<li>Nav 2</li>

<li>Nav 3</li>

</ul>

<ul >

<li>Nav 1</li>

<li>Nav 2</li>

<li>Nav 3</li>

</ul>

<ul >

<li>Nav 1</li>

<li>Nav 2</li>

<li>Nav 3</li>

</ul>

</nav>

</body>

</html>

cw_style.css

#bottom{

display:flex;

justify-content:center}

Step-by-step explanation:

in HTML <ul> is used for unordered list. This tag display items in the form of list.<li> tag is a type of item that can be displayed inside li tag. <nav> is a html tag to define a navigation bar element.

To center list using flex set display property of <ul> parent to flex and justify content in flex to center. This will center align all the content inside <nav>.It's important to note that flex justify content property only works for block elements in html like <div>, <p>.

User Nurgasemetey
by
6.1k points