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

CSS

Edgar Mantes
Edgar Mantes
9,499 Points
Posted by Edgar Mantes
Edgar Mantes
9,499 Points

relationship between display:, position: and their child elements

I'm trying to practice making a nav bar that is absolutely positioned to a container that is relatively positions. So the "nav" container has a "position: absolute" property and also a "display: flex" property. The default to the child elements should be inline-block but it is not showing that. I tried changing widths of the two elements in the nav container but it is not allowing me to do that also. Please help! here is the code:

[HTML] <body> <div id="nav"> <p>image</p> <ul> <li>Sign Up</li> <li>Sign In</li> </ul>

</body>

[CSS] body { position: relative; height: 100vh; }

nav {

position: absolute; diplay: flex; flex-direction: row; top: 0; left: 10%; right: 10% }

ul { display: flex; list-style: none; }

Here is a link to the codepen where my practice page is at: http://codepen.io/shootermantes/pen/NNjVVm?editors=1100

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I'm guessing it's the size of the list items you're trying to adjust? If that's the case, add this to the bottom of the CSS and see how it looks.

li {
  width: 50%;
}
Edgar Mantes
Edgar Mantes
9,499 Points
Edgar Mantes
Edgar Mantes
9,499 Points

I'm trying to justify the "Sign-In / Sign Up" elements to the right and the "image" to the left by using flexbox but the two child elements are behaving like block elements, instead of inline-block elements.