Question

我希望以内联形式显示菜单，但它不起作用。任何帮助？（不要担心图片）。Here is a screenshot of what I want to achieve。“如所见”将占据屏幕截图上的红色持有者。

<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>

Answer 1

这里不是很多，但我会尝试一下。

默认情况下，每个<div>都有块上下文。在父display: inline;上设置<div>将不会被子<div>继承。将display: inline;应用于所有<div>。使用<span>代替<div>，因为默认情况下它是内联元素，并且默认情况下不会尝试占用父元素的整个宽度。

如果您正在寻找创建菜单，我个人会稍微更改标记。请改用<nav>，<ul>，<li>，<a>等。也许就像我在下面的那样。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

问题是display: inline;不允许任何块样式。你在块元素上使用它。如果您希望元素位于同一行，则应考虑使用例如float属性

.header div {
  float: left;
}

但不要忘记清除花车。

Answer 3

如果我理解正确的话，你想要你的块（如图所示，有图像）连续吗？如果是这样，您可以使用浮动。另请注意，我已使用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>

Answer 4

span{
margin:0;
padding:0;
}

或

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

Answer 5

对于这个问题，您应该为所有内部div设置display:inline属性，而不是为外部div设置。

Div内联不起作用

5 个答案: