html - 菜单项中断文本

Question

我有个问题。它可能看起来很简单，但我无法解决这个问题。我有一个菜单，里面有 10 个项目。第 9 项没有以正确的方式对齐，原因有 2 行文本。我怎样才能解决这个问题？

JSFIDLE

HTML：

<ul style="list-style:none; width: 615px;">
<li style="display: inline-block;"><a class="butao" href="http://www.ahighplay.org/pt/gca/index.php?id=34&preview=1">DFC Portugal</a>

</li>
<li style="display: inline-block;"><a class="butao" href="http://www.ahighplay.org/pt/gca/index.php?id=30&preview=1">Processo DFC</a>

</li>
<li style="display: inline-block;"><a class="butao" href="http://www.ahighplay.org/pt/gca/index.php?id=72&preview=1">Como Participar</a>

</li>
<li style="display: inline-block;"><a class="butao" href="http://www.ahighplay.org/pt/gca/index.php?id=70&preview=1">Calendário</a>

</li>
<li style="display: inline-block;"><a class="butao" href="http://www.ahighplay.org/pt/gca/index.php?id=71&preview=1">Regulamento</a>

</li>
<li style="display: inline-block;"><a class="butao" href="http://www.ahighplay.org/pt/gca/index.php?id=26&preview=1">FAQ's</a>

</li>
<li style="display: inline-block;"><a href="http://www.ahighplay.org/pt/gca/index.php?id=25&preview=1" class="butao">Vídeos</a>

</li>
<li style="display: inline-block;"><a href="http://ahighplay.org/pt/gca/index.php?id=61&preview=1" class="butao">Notícias</a>

</li>
<li style="display: inline-block;"><a href="http://www.ahighplay.org/pt/gca/index.php?id=27&preview=1" class="butao" style="line-height: 20px">Parceiros / Patrocinadores</a>

</li>
<li style="display: inline-block;"><a href="http://www.ahighplay.org/pt/gca/index.php?id=28&preview=1" class="butao">Contactos</a>

</li>

Answer 1

添加此设置以使按钮保持在同一行。

ul li {
    vertical-align: middle;
}

jsFiddle 演示

此外，不建议使用内联样式（并且它会在每个列表项上重复）。您应该将该设置移至 CSS，因此您的代码将是：

ul li {
    vertical-align: middle;
    display: inline-block;
}