javascript - 对齐图标二级菜单

Question

http://oncofigado.suryamkt.com.br/

大家好

我已经尝试了很多 CSS 来对齐页面顶部的这些图标，但它没有奏效。如果有人可以帮助我，我将不胜感激。

这是每个图标中的实际代码。

.menu-item-74{ 边距顶部：10px; 边距右：500px；向左飘浮; }

标签： javascripthtmlcsswordpress

Answer 1

仅使用 CSS 无法解决此问题。为了让图像看起来像我们想要的那样，我们还需要对 HTML 结构进行更改。

解决方案

---

此解决方案将左上角和右上角分成各自的div. 然后它适用display: flex; justify-content: space-between;于父容器。

<div id="et-secondary-menu" style="float: none;">
  <div id="et-secondary-nav" class="menu" style="display: flex; justify-content: space-between;">
    <div>
      <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-74"><a href="https://www.facebook.com/"><img class="alignnone size-full wp-image-156" src="http://oncofigado.suryamkt.com.br/wp-content/uploads/2019/10/icones-facebook-dourado.png" alt="oncofigado-facebook" width="25" height="25"></a></li>
      <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-75"><a href="https://www.instagram.com/"><img class="alignnone size-full wp-image-156" src="http://oncofigado.suryamkt.com.br/wp-content/uploads/2019/10/icones-instagram-dourado.png" alt="oncofigado-instagram" width="25" height="25"></a></li>
      <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-106"><a href="https://www.youtube.com/"><img class="alignnone size-full wp-image-156" src="http://oncofigado.suryamkt.com.br/wp-content/uploads/2019/10/icones-youtube-dourado.png" alt="oncofigado-youtube" width="25" height="25"></a></li>
      <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-107"><a href="#"><img class="alignnone size-full wp-image-156" src="http://oncofigado.suryamkt.com.br/wp-content/uploads/2019/10/icone-whastapp-dourado.png" alt="oncofigado-whatsapp" width="25" height="25"></a></li>
    </div>
    <div>
      <div class="menu-item menu-item-type-custom menu-item-object-custom menu-item-76"><a href="#"><img class="alignnone size-full wp-image-156" src="http://oncofigado.suryamkt.com.br/wp-content/uploads/2019/10/agende-sua-consulta-1.jpg" alt="agende-sua-consulta"></a></div>
    </div>
  </div>
</div>

结果

---