Menu
I'm having an issue with a menu un-ordered list. Whereby the list items are over running the <ul> and <div> boundaries and only starting the next line once it has reach the edge of the screen.
Heres the website: http://finalonline.co.uk/mypics/gallery/categories/
929
Actually, according to the HTML5 draft, the content model of the dt and dd elements is "flow content", so a div is allowed in both of those.
1. Display: Inline-Block. The first way you can use is the display: inline-block method. This method is a simple and classic CSS technique for positioning elements side by side.
The list items can be separated with a margin on the "LI" element. In this case margin of "0.2em" was applied to the bottom of the "LI".
The spacing between list items in an orderedlist or itemizedlist element can be minimized by the document author by adding a spacing="compact" attribute to the list element. In HTML output, the list will get a compact="compact" attribute on the list start tag to reduce spacing in the browser.
Do display: block; always... Never do display: inline; or display: inline-block;
To fix the Unordered List from pouring out of the DIV, try going into the CSS and apply this:
ul {
list-style-position: inside;
}
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
