Closed dmcdougall closed 11 years ago
Furthermore, it appears that nested lists do not display with an extra level of indentation. They appear flush with the parent list.
Try my solution in this issue: https://github.com/zurb/foundation/issues/2110
I confirmed that it's working in Firefox and Chrome.
@emilhem Thanks! That fixes the alignment issue for the bullets. However, it does not shift nested lists to have an extra level of indentation.
Try adding a class to the nested ul giving it extra margin to the left.
I haven't tested it.
@emilhem I'll try that when I get home tonight. Thanks for the suggestion. I am confused, though, as to why there doesn't appear to be an extra class in documentation page. If you view the source of the page and scroll down to the "Lists" section, it appears as though nothing extra is done to achieve the correct layout.
list-style-position
- Basic CSS.
According to typography standards the hanging bullets are preferable for readability. Here is a good article on the subject: http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography-part-2
@ascottmccauley Yes, @emilhem already suggested that, and it works wonderfully. And I also see this override in Foundation's docs.css
file. What I don't understand is why nested lists are not indented properly. There appears to be no extra class applied to nested elements in the docs.css
file, yet the indentation is perfect.
I have figured out the problem. I was doing the HTML incorrectly. My code looked something like:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<ul>
<li>Nested list item</li>
</ul>
</ul>
Instead, this is the correct way to do nested lists:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Nested list item 1</li>
</ul>
</li>
</ul>
Thanks for the help @emilhem and @ascottmccauley. I'll close this now.
Although this one is closed, it was discussing two things:
For the second one, the author of the issue figured out it was his own fault and closed the issue.
Lets go back to discuss the first one for a moment, even though people are saying just use list-style-position
, the project documentation right now has this alignment problem as you can see in the screenshot:
Is that a real problem with bullets in list or an expected behaviour?
When I use a list, it is not displayed correctly. The bullet points do not align with the heading. The behaviour I expect is the the bullet points should align with the other content. Here is a screenshot of the behaviour I see:
Here is code from inside the
<body>
tag that recreates my problem: