在导航下拉列表中删除单词中断

Question

我尝试删除“Startseite”与“新闻”下方下拉列表中的数字之间的中断，无论我尝试它总是包裹

jsfiddle.net

我试图

#navigation nav #main-list li ul li

停止换行，但没有一个css换行功能为我工作

Answer 1

#navigation nav #main-list li ul {

    white-space: nowrap;
}

我注意到您的CSS可以简化：

• 避免使用*规则，they are expensive并将边距和填充重置为零，这可能会损害可读性，除非您要为每个元素手动设置它们。重新使用。
• 当浏览器窗口狭窄时，您的菜单不起作用。
• float: left;现已过时，可以水平堆叠元素。请考虑使用display: inline-box，这样可以更好地控制外观，这意味着您可以避免使用clear。

• 即使使用float，您也不再需要手册<div class="clearer">，请改用::after伪元素：

  (container of floating elements)::after {
      display: block;
      content: " ";
      clear: both;
  }
  

• 您的nav元素在此上下文中被浪费。请考虑仅使用<div id="navigation">替换<nav>并删除内部<nav>元素。

• 您的<div id="wrapper">在此示例中没有任何用途。另外，请考虑使用简单的<section>元素替换它，这会使您的标记（稍微）更具语义。

Answer 2

将white-space: nowrap;添加到#navigation nav #main-list li a。

请参阅this updated fiddle：

#navigation nav #main-list li a {
    display: block;

    padding: 0 12px;

    color: #eee;
    white-space: nowrap;
    text-decoration: none;
}

Answer 3

只要您可以手动编辑代码，就可以进行非常简单的更改。

取代：

<li><a href="/">Startseite&nbsp;1</a></li>

与

<li><a href="/">Startseite&nbsp;1</a></li>

 代表非破碎空间，这正是您所需要的。