导航栏子菜单的文本显示为两行

Question

这是我的菜单：

如您所见，我的子菜单项已损坏。

我的意思是，“Express 16k”显示为：

"Express
16k"

而不是

"Express 16k"

我的相关代码是：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/daisyui.css" rel="stylesheet" type="text/css" />

<div class="flex flex-col min-h-screen">
<div class="navbar bg-base-100 shadow-sm">
  <div class="flex-1">
    <a class="btn btn-ghost text-xl">daisyUI</a>
  </div>
  <div class="flex-none">
    <ul class="menu menu-horizontal px-1">
      <li><a>Inici</a></li>
      <li><a>Inscripcions</a></li>
      <li>
        <details>
          <summary>Recorreguts</summary>
          <ul class="bg-base-100 rounded-t-none p-2" >
            <li><a>Marxa 10k</a></li>
            <li><a>Express 16k</a></li>
            <li><a>Puigcerver Trail 23k</a></li>
          </ul>
        </details>
      </li>
      <li><a>Reglament</a></li>
      <li><a>Informació</a></li>
      <li><a>Contacte</a></li>
    </ul>
  </div>
</div>
</div>

对这种行为有什么想法吗？

我需要每个项目都是“单行”...

Answer 1

您可以添加针对包裹在

.menu

元素下的任何列表项内的锚元素的 CSS 规则。

.menu li > a {
  white-space: nowrap;
}

仅此策略将适用于您当前的代码片段：

.menu li > a {
  white-space: nowrap;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/daisyui.css" rel="stylesheet" type="text/css" />

<div class="flex flex-col min-h-screen">
<div class="navbar bg-base-100 shadow-sm">
  <div class="flex-1">
    <a class="btn btn-ghost text-xl">daisyUI</a>
  </div>
  <div class="flex-none">
    <ul class="menu menu-horizontal px-1">
      <li><a>Inici</a></li>
      <li><a>Inscripcions</a></li>
      <li>
        <details>
          <summary>Recorreguts</summary>
          <ul class="bg-base-100 rounded-t-none p-2" >
            <li><a>Marxa 10k</a></li>
            <li><a>Express 16k</a></li>
            <li><a>Puigcerver Trail 23k</a></li>
          </ul>
        </details>
      </li>
      <li><a>Reglament</a></li>
      <li><a>Informació</a></li>
      <li><a>Contacte</a></li>
    </ul>
  </div>
</div>
</div>

或者，如果您希望仅针对您决定的特定元素，您可以定义相同的规则，但使用不同的选择器，例如：

.whitespace-nowrap {
  white-space: nowrap;
}

然后将该类添加到您希望发生该行为的任何元素。

为了完整起见，确切的类名应该像使用 tailwind（daisyui 组件下的 css 框架）一样工作，如下所示：

https://tailwindcss.com/docs/whitespace

不幸的是我不知道为什么，但它不适用于这里。