html - 增加嵌套 (ul ul ul li) 下拉导航列表项的宽度

Question

这是我的网站: http://www.simply-a-christian.com/index.html

在导航栏上，如果您移动到:

• 信念
  • 玛丽安教义

您可以看到每个 Marian Dogma(列出了四个)的列表项中的文本被换行了。我想增加四个单独列表项中每一个的宽度，以便列表项的文本位于一行中。我该如何实现？

https://jsfiddle.net/H3br3wHamm3r81/aq8au39v/

HTML

<ul>    
<li><a href="beliefs.html" title="Beliefs">Beliefs</a>
      <ul>
      <li><a href="beliefs/marian_dogmas.html" title="Marian Dogmas">Marian Dogmas</a>
            <ul>
            <li><a href="beliefs/marian_dogmas/assumption_of_mary.html" title="Assumption of Mary">Assumption of Mary</a></li>
            <li><a href="beliefs/marian_dogmas/immaculate_conception.html" title="Immaculate Conception">Immaculate Conception</a></li>
            <li><a href="beliefs/marian_dogmas/mother_of_god.html" title="Mother of God">Mother of God</a></li>
            <li><a href="beliefs/marian_dogmas/perpetual_virginity.html" title="Perpetual Virginity">Perpetual Virginity</a></li>
            </ul>
      </li>
      </ul>
</li>
</ul>

样式表可以在上面的链接中找到。

Answer 1

使用像这样的自定义类为特定的无序列表添加 white-space 并删除 float:

HTML:

<ul class="listCustom">
    <li><a href="beliefs/marian_dogmas/assumption_of_mary.html" title="Assumption of Mary">Assumption of Mary</a></li>
    <li><a href="beliefs/marian_dogmas/immaculate_conception.html" title="Immaculate Conception">Immaculate Conception</a></li>
    <li><a href="beliefs/marian_dogmas/mother_of_god.html" title="Mother of God">Mother of God</a></li>
    <li><a href="beliefs/marian_dogmas/perpetual_virginity.html" title="Perpetual Virginity">Perpetual Virginity</a></li>
</ul>

CSS:

.listCustom li  {
  white-space: nowrap;
  float: none;
}

这是一个包含上述代码的 jsfiddle:http://jsfiddle.net/AndrewL32/aq8au39v/2