使列表跳过图像

Question

我有以下设计

the Story of Us，The Style，Journal，Locate Us，the Contact，这些都将来自wordpress仪表板＆gt;菜单，所以它是动态的。现在，如何使该菜单跳过图像（L.tru徽标）并继续直到最后一个菜单项，这样图像将保持在导航菜单的中心？

Answer 1

不知道准确的代码 - 假设菜单的结构如下：

<ul class="menu">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

我们知道徽标出现在第二个菜单项之后。所以我们可以使用以下内容：

ul.menu li:nth-child(2) { margin-right: Xpx }

其中Xpx需要是徽标的适当宽度，以及菜单项和徽标之间的边距。

但是，由于这可能会动态变化 - 您可能需要在每次更改菜单时更改此菜单，因为菜单项长度会发生变化。

更好的方法是实际制作两个WordPress菜单：一个位于徽标左侧和右侧。然后你可以更加确定定位。

理论上可行的第三种更先进的方法是使用SASS和CSS计算更加动态地计算适当的边际。