我为一家意大利餐厅写了一份菜单。该菜单由一个无序列表组成，其中每个 li 元素都有一个名为“headline”的类。每个 li 元素都包含一个标题和另一个 ul，其中 li-s 作为菜肴。
它看起来像这样：
<ul>
<li class="headline">
<h3>Kind of dishes</h3>
<ul>
<li>Dish 1</li>
<li>Dish 2</li>
<li>Dish 3</li>
</ul>
</li>
<li class="headline">
<h3>Another kind of dishes</h3>
<ul>
<li>Dish 1</li>
<li>Dish 2</li>
<li>Dish 3</li>
</ul>
</li>
</ul> 我正在尝试制作菜单的可打印版本，但不知道为什么“page-break-after”或“page-break-before”在CSS中的“.headline”上起作用。
我尝试了不同的显示值，如“块”、“内联块”或“表行”，因为阅读某些论坛建议这样做。我还尝试了不同的位置值（“绝对”，“相对”，“静态”）......
我还尝试用 div 元素包裹“标题”li-s 并在 div 元素上使用分页符：
<ul>
<div>
<li class="headline">
<h3>Kind of dishes</h3>
<ul>
<li>Dish 1</li>
<li>Dish 2</li>
<li>Dish 3</li>
</ul>
</li>
</div>
<div>
<li class="headline">
<h3>Another kind of dishes</h3>
<ul>
<li>Dish 1</li>
<li>Dish 2</li>
<li>Dish 3</li>
</ul> …