html - 当通过 CSS 隐藏更高的元素时，如何将 <li> 对齐到顶部

Question

我有一个<ul>做一个菜单栏。该栏垂直位于屏幕左侧。当从第一个可见部分中选择一个选项时，我将使用 JS隐藏第一个 block 并将其余 block 设置为 .show()

基于所选选项的下一个 block 。现在，我对JS没有任何问题。这一部分。我的问题是 - 当我 .hide()和.show() <li>组中，他们保持好像其他人在场一样(选项与顶部对齐之间存在很大差距)。

这是我的列表示例:

<ul class="menu">
    <li><a id="mainSuit" href="javascript: void(0)">Suit</a></li>
    <li><a id="mainFinances" href="javascript: void(0)">Finances</a></li>
    <li><a id="mainMissions" href="javascript: void(0)">Missions</a></li>
    <li><a id="mainTerritory" href="javascript: void(0)">Territory</a></li>
    <li><a id="mainCompany" href="javascript: void(0)">Company</a></li>
    <li><a id="mainTravel" href="javascript: void(0)">Travel</a></li>
</ul>

<!-- More <ul> between the two -->

<ul class="menu">
    <li><a id="suitLoadout">Loadout</a></li>
    <li><a id="suitEquipment">Equipment Market</a></li>
    <li><a id="suitMunitions">Munitions Surplus</a></li>
    <li><a id="suitRefuel">Refuel</a></li>
    <li><a id="suitRepair">Repair</a></li>
</ul>

对于CSS

#suitRepair {
    display: none;
}

/* same for all of the IDs */

因此，当选择 id ma​​inSuit 时 - 所有 <ul class="menu">将被隐藏并显示西装部分。

我怎样才能得到它，以便消除这些之间的 UL block 之间的任何间隙。

Answer 1

只需尝试在

上指定 id，而不是 :

<li><a id="suitLoadout">Loadout</a></li>

将是:

<li id="suitLoadout"><a>Loadout</a></li>

现在您将隐藏

标签而不是该标签的内容，因此空格间隙将得到解决;)