Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Kuanting Ho
Front End Web Development Techdegree Student 4,796 PointsDifference between "nav li" and "nav a"
In the first step, "nav a {float:left;}" and "nav li {float:left;}" display the exact same result.
But when I used "nav a {float:left;}", at the very last step (center align navigation bar), the navigation bar showed up vertically instead of horizontally aligned. After I switched my code from "nav a {float:left;}" to "nav li {float:left;}", the navigation bar was correctly showing as horizontally aligned.
Can someone please help explain to me why this is causing an issue.
1 Answer
Martin Sole
82,021 PointsHi
Using nav a targets all the anchor elements inside the nav.
However this doesn't take into account those that might be descendants of other elements, such as this instance where the anchor elements are children of li elements. So adding float left to nav a will cause the anchor elements to float left inside of their containers, which are the li elements in this example. List items default position(display:list-item) is to stack vertically, which is why this only changed when you used nav li float left that they displayed inline.