Блог

Я хочу отобразить меню во встроенной форме, но это не работает.Есть помощь?(Не беспокойтесь о картинках).Вот скриншот того, чего я хочу достичь.»Как видно» будет занимать красную рамку на скриншоте.

 <div class="header" style="display:inline;">

  <div style="font-size:26px;">
    <span> As seen on</span>
  </div>

  <div>
    <a href="https://www.marketingignite.com/basic-commonsensical-seo-tips-and-tricks/" target="_blank"><img style="vertical-align: middle; background-color:#000;" src="<?php echo get_template_directory_uri(); ?>/images/marketing_ignite_logo.png" /></a>
  </div>

  <div>
    <a href="<?php echo esc_url(home_url()); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.gif" alt="Logo Buyseoleads"></a>
  </div>

  <div class="seenBefore2" style="font-size:26px;">
    <span>As seen on</span>
  </div>

  <div>
    <a href="http://www.releasewire.com/press-releases/explaining-the-advantage-of-verified-and-exclusive-ppc-and-seo-leads-how-buy-seo-leads-helps-agencies-achieve-greater-success-and-conversions-549381.htm" target="_blank"><img style="vertical-align: middle; background-color:#000;" src="<?php echo get_template_directory_uri(); ?>/images/release_wire_logo.png"/></a>
    <!--img src="<?php //echo get_template_directory_uri(); ?>/images/daily-news-newspaper-headline.jpg" alt="Daily News Newspaper Headline"-->
  </div>

</div>  

Здесь не так много, чтобы продолжать, но я попробую.

У каждого <div> по умолчанию есть контекст блока. Настройка display: inline; для родительского <div> элемента не будет унаследована дочерними <div> элементами. Применяется display: inline; ко всем <div> . Используйте <span> вместо <div> , поскольку по умолчанию это встроенный элемент, и по умолчанию он не будет пытаться занимать всю ширину родительского элемента.

Лично я бы немного изменил разметку, если вы хотите создать меню. Вместо этого используйте <nav> , <ul> , <li> <a> и т.д. Возможно, что-то вроде того, что я описал ниже.

 ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  padding: 3px 6px;
  float: left;
}
li img {
  vertical-align: middle;
}  

 <header>

  <nav>
    <ul>
      <li>As seen on
        <a href="#">
          <img src="http://placehold.it/50x50/ffcc00/">
        </a>
      </li>
      <li>As seen on
        <a href="#">
          <img src="http://placehold.it/50x50/cc0000/">
        </a>
      </li>
    </ul>
  </nav>

</header>  

Проблема в том, что display: inline; не допускает никакого блочного оформления. И вы использовали это для блочного элемента. Если вы хотите, чтобы элементы находились в одной строке, вам следует рассмотреть возможность использования, например, свойства float

 .header div {
  float: left;
}
  

Но не забывайте об очистке значений с плавающей точкой.

Если я вас правильно понял, вы хотите, чтобы ваши блоки (как показано на, с изображением) располагались подряд? Если это так, вы можете использовать значения с плавающей запятой. Также обратите внимание, что я заменил ваши изображения на изображения placeholdit.

https://jsfiddle.net/aa8zs200/

 <div style="width: 100%; position: relative;">

  <div style="float: left; margin-right: 10px;">
    <div style="font-size:26px;"><span> As seen on</span></div>
    <div>
      <a href="https://www.marketingignite.com/basic-commonsensical-seo-tips-and-tricks/" target="_blank">
        <img style="vertical-align: middle; background-color:#000;" src="http://placehold.it/350x150" /> </a>
    </div>
  </div>
  <div style="float: left; margin-right: 10px;">
    <div style="font-size:26px;"><span> As seen on</span></div>
    <div>
      <a href="<?php echo esc_url(home_url()); ?>"><img src="http://placehold.it/350x150" alt="Logo Buyseoleads"></a>
    </div>
  </div>
</div>
  

 span{
margin:0;
padding:0;
}
  

или

 span{
display:block;
float:left;
padding:0 10px;
}
  

Для этого вопроса вы должны установить display:inline атрибут для всех внутренних разделов, а не для внешнего div.