Forum Bugs

inline-block with inner list

nineohnine
This may just be a stupid question but here is the scenario (html included below). This is also a simplified version of what is really happening on a production page, but looking for some guidance.

When I have a div that is displayed inline-block, and then inside it I have a really long ordered or unordered list, the list gets chopped and does not have a page break and then finish the list. I have made sure to try and set the list and items to display inline-block but this has no effect. Am I missing something?

HTML Example:

<!doctype html>
<html>
<head>
<title>SMI Extractor</title>
</head>
<body>
<div style="display: inline-block;">
<ul style="display: inline-block;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>

--add lots more items here

<li>Item 99</li>
</ul>
</div>
</body>
</html>
mikeday
An inline-block is an inline element that fits on a single line, and single lines cannot be split across multiple pages.