Question

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

在导航栏上，如果您转到：

信念
- Marian Dogmas

你可以看到每个玛丽安教条（列出四个）的列表项中的文字被包装。我想增加四个单独列表项的宽度，以便列表项的文本在一行中。我该如何做到这一点？

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

Answer 2

通过添加此样式，您可以阻止所有菜单项中断，包括Maria教条：

header nav li {
    white-space: nowrap;
}

您仍然可以通过在文本中添加<br>标记来添加明确的中断。您还可以考虑在包含菜单的nav元素中添加一个特殊类，如menu。否则，此样式可能会影响您稍后可能要添加的其他导航块。

增加嵌套（ul ul ul li）下拉导航列表项的宽度

2 个答案: