Html 如何阻止水平列表在列表项中中断？

假设以下列表：

<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>

如何停止列表在列表项中间的包装？ 也就是说，我想让它在“多伦多之星”和“堆栈溢出”（如果需要）之间换行，而不是在“堆栈”和“溢出”之间换行

---

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

与其将每个列表项显示为“inline”，不如将其显示为“block”，并将其浮动为“left”

这将防止每个项目内部的文本中断

我倾向于用这种方式制作水平导航栏，因为它消除了类似这些问题以及内联元素相邻时产生的尴尬间距问题

---

编辑：浮动元素会自动将其显示为“块”，因此只需删除“display:inline”并将列表项向左浮动即可。

与其将每个列表项显示为“inline”，不如将其显示为“块”，并将其向左浮动即可

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

这将防止每个项目内部的文本中断

我倾向于用这种方式制作水平导航栏，因为它消除了类似这些问题以及内联元素相邻时产生的尴尬间距问题

---

编辑：浮动元素会自动将其显示为“块”，因此只需删除“display:inline”并将列表项向左浮动即可。

将

a

标记显示为

inline块

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

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

---

使

a

标记显示为

内联块

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

---

是否使用

<代码>堆栈溢出会阻止浏览器在那里拆分内容。毕竟，它的“（n）on-（b）reaking（sp）ace”看起来像一个答案，说话像一个答案……添加：

display:inline块到
a
样式？使用
<代码>堆栈溢出

会阻止浏览器在那里拆分内容。毕竟，它的“（n）on-（b）reaking（sp）ace”看起来像一个答案，说话像一个答案……添加：

display:inline块到
a
样式？良好的开始。但这将允许在一个LI内中断，但将在块内完成。（即，第一行变为两行高，第二行显示在该行下方）添加的空白：nowrap；它解决了，好的开始。但这将允许在一个LI内中断，但将在块内完成。（即，第一行变为两行高，第二行显示在该行下方）添加的空白：nowrap；它把它修好了。