Welcome to Westonci.ca, the ultimate question and answer platform. Get expert answers to your questions quickly and accurately. Discover in-depth answers to your questions from a wide network of professionals on our user-friendly Q&A platform. Experience the ease of finding precise answers to your questions from a knowledgeable community of experts.

Horizontal Navigation List Styles
Go to the Horizontal Navigation List Styles section. Karen has added a second navigation list that she wants to display horizontally. For all list items within the horizontal navigation list, create a style rule that displays the items as blocks with a width of 12.5% floated on the left margin.
Here is my code:
/* Horizontal Navigation List Styles */
.horizontal li {
display: block;
width: 12.5%;
float: left;
}
It's coming through as just a line and I have no idea how to fix it, please help!

Sagot :

Answer:

Explanation:

The best way to do this would be to use the following line of code

clear: left;

This would make sure that there are no floating elements (li's in this scenario) on the left side of each element. Which in this navigation list would be each individual element, causing it to move each element underneath the previous element. Therefore the entire CSS code would be

.horizontal li {

   display: block;

   width: 12.5%;

   float: left;

   clear: left;

   }

An example can be seen in the attached picture below.

View image sandlee09