0

私は問題があります。簡単に見えるかもしれませんが、これを修正することはできません。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>

4

1 に答える 1

1

この設定を追加して、ボタンを同じ行に配置します。

ul li {
    vertical-align: middle;
}

jsFiddle デモ

さらに、インライン スタイルを使用することはお勧めできません (すべてのリスト項目で繰り返されます)。その設定を CSS に移動する必要があるため、コードは次のようになります。

ul li {
    vertical-align: middle;
    display: inline-block;
}
于 2013-09-16T11:43:38.797 に答える