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
Nicholas Gabriel
16,294 PointsOn set display property of <a> to block, inside a li element, which is inline-block. Why didnt <a> start with new line.
<li style="display:inline-block"><a href="#">ice cream</a></li>
<li style="display:inline-block"><a style="display:block" href="#">donuts</a></li>
<li style="display:inline-block"><a href="#">tea</a></li>
<li style="display:inline-block"><a href="#">coffee</a></li>
Here why donuts didnt start with new line as its block element now ???
3 Answers
Steven Parker
229,732 PointsThat's what the "inline" part of "inline-block" means. It allows the element to share a line with it's neighbors.
A plain "block" element (which is the default for list items) would take up a whole line.
furkan
11,733 PointsThe <a> is a child ofits parent <li> so it will only take up the full width of its parent container.
However, if you set <li> to inline the <a> will technically too line up side by side, this is because it is contained in its parent <li>.
I hope that made sense.
Nicholas Gabriel
16,294 PointsYes. Thanks for answering.
Nicholas Gabriel
16,294 PointsOne more finding. If i will add some text before the "donuts" anchor tag, let say, "test". The donuts part start with a new line after "test". Here "test" is the first content in parent element. But in the earlier case "donuts" was the first content.
<li style="display:inline-block"><a href="#">ice cream</a></li>
<li style="display:inline-block">test<a style="display:block" href="#">donuts</a></li>
<li style="display:inline-block"><a href="#">tea</a></li>
<li style="display:inline-block"><a href="#">coffee</a></li>
furkan
11,733 PointsIt may be because you forgot to put a closing </li> after your test. Try this:
<li style="display:inline-block"><a href="#" style="display: block">ice cream</a></li>
<li style="display:inline-block"><a style="display:block" href="#">test</a></li>
<li style="display:inline-block"><a style="display:block" href="#">donuts</a></li>
<li style="display:inline-block"><a href="#" style="display: block">tea</a></li>
<li style="display:inline-block"><a href="#" style="display: block">coffee</a></li>
Nicholas Gabriel
16,294 PointsNicholas Gabriel
16,294 PointsYes, that I got. But what about the display style of anchor element corresponding to "donuts". Its set as "block"
Steven Parker
229,732 PointsSteven Parker
229,732 PointsInside a containing element, it will take up a line relative to other content in the same container. It won't affect the alignment of the container itself.