выровнять значки вторичного меню

Question

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

Привет всем

Я очень много пробовал CSS для выравнивания этих значков в верхней части страницы, но это не сработало. Если кто-нибудь может мне помочь, я так благодарен.

Это действительный код, в каждой иконке.

.menu-item-74 {margin-top: 10px;Маржа направо: 500px;плыть налево;}

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>

Результаты

---

Answer 2

Не уверен, насколько у вас есть контроль над редактированием вашей страницы, но вот одно решение, которое должно работать, не заставляя вас менять HTML.

Я включаю только то, что я добавил поверх того, что вы уже сделалииметь на странице.

Для # et-second-menu div:

width: 100%;

Для # et-primary-nav ul:

width: 100%;
display: flex;

Для# menu-item-76 li:

flex: 1;

Это должно дать вам адаптивное меню.