Menu
I have a really simple set up:
<div class="container"> <ul> <li>Item one</li> <li>Item two</li> </ul> </div> I had assumed that all contents and the bullets of the UL would be within the div, but currently this is not the case.
The bullet points for the UL appear outside of the div and effectively disappear when overflow is hidden.
To me this is somewhat broken and cross browser compatible, and I've scanned the HTML spec but couldn't find anything saying this should happen.
Is there a CSS fix for it or other layout fix?
827
You can use . parentOfUl{ text-align:center;} and then ul{ display:inline-block; }, and at last li{ text-align:center; }.
Adding the "list-style: none" CSS class to the unordered list (<ul>) or ordered list (<ol>) tag removes any bullet or number.
To create unordered list in HTML, use the <ul> tag. The unordered list starts with the <ul> tag. The list item starts with the <li> tag and will be marked as disc, square, circle, etc. The default is bullets, which is small black circles.
They're just tags. There's zero difference whatsoever between them DOM-wise; the only difference is in the rendering (CSS, which you can customize either way) and the meaning (semantics). If you have a list of things, use a <ul> .
You'll want to use list-style-position:
ul { list-style-position: inside; } list-style-position: inside works great unless your bullet points will need multiple lines on small screens as your text will align with the bullet point rather than where the text begins.
Keeping the default text-align: outside, allowing for a small margin and aligning the text to the left to override any centered containers gets around the bullet point alignment problem.
ul, ol { margin-left: 0.75em; text-align: left; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
