html - 如何阻止水平列表在列表项内中断？

Question

假设以下列表:

<div class="menublock">
        <ul class="menu">
            <li><a href="Default.aspx">Home</a></li>
            <li><a href="http://google.com">Google</a></li>
            <li><a href="http://pornhub.com">Porn Hub</a></li>
            <li><a href="http://www.thestar.com">Toronto Star</a></li>
            <li><a href="http://www.stackoverflow.com">Stack Overflow</a></li>
            <li><a href="http://example.com/">Example Site</a></li>
            <li><a href="http://www.yorku.ca">York University</a></li>
        </ul>

    </div>

使用以下 CSS

.menublock .menu {
margin-top: 35px;}

.menublock .menu li {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}

    .menublock .menu li a {
        font-size: 16pt;
    }

如何阻止列表在列表项中间换行？ 也就是说，我希望它在“Toronto Star”和“Stack Overflow”之间换行(如有必要)，但不在“Stack”和“Overflow”之间换行

换行符应响应实际屏幕宽度，而不是强制使用子后选择器或其他此类固定点。

Answer 1

让a标签显示为inline-block

.menublock .menu li a {
    font-size: 16pt;
    display:inline-block;
}