html - 显示内联两个 div

Question

我有这段代码 HTML:

<header id="masthead" class="site-header" role="banner">
        <div class="site-branding">
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>



        </div><!-- .site-branding -->

        <nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle" aria-controls="menu" aria-expanded="false"><?php _e( 'Primary Menu', 'eventos' ); ?></button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        </nav><!-- #site-navigation -->

    </header><!-- #masthead -->

我想安排 .site-branding 和 #site-navigation。

我试过了但是没用

.site-branding,#site-navigation{display:inline-block;}

这段代码有什么问题？

编辑:

   .main-navigation {
    clear: both;
    display: inline-block;
    float: left;
    width: 100%;
}

这是网站:

http://eventos.dac-proiect.ro/

提前致谢!

Answer 1

看起来您正在修改 WordPress 主题，这意味着还有其他 CSS 规则在起作用。

您似乎希望 .site-branding 和 .main-navigation 向左浮动并保留在父 block 内而不破坏布局的其余部分。

我会将 overflow: auto 应用于 .site-header 以创建 block 格式上下文，这将防止 float 元素干扰布局中的任何其他元素.

将 .site-branding 的 width 设置为足够小的值，以便为 .main-navigation 留出一些空间。如果将其设置为 100%，导航将从第二行开始。

我假设您希望所有内容都在一行中，否则请说明。

我的示例说明了您可能尝试做的事情。但是，由于您在 WordPress 中使用预先存在的样式表，因此您需要使 CSS 规则足够具体，以便根据需要设置标题样式，而不会破坏其他组件，例如 WP 的导航面板等。

.site-header {
  border: 1px dotted gray;
  overflow: auto;
}
.site-branding {
  border: 1px dotted gray;
  float: left;
  width: 50%; /* If value is 100%, .main-navigation will wrap to 2nd line */
}
.main-navigation {
  border: 1px dotted gray;
  float: left;
}

<header id="masthead" class="site-header" role="banner">
  <div class="site-branding">
    <h1 class="site-title"><a href="#" rel="home">Site Title</a></h1>
    <h2 class="site-description">Description</h2>
  </div><!-- .site-branding -->

  <nav id="site-navigation" class="main-navigation" role="navigation">
    <button class="menu-toggle" aria-controls="menu" aria-expanded="false">
      Primary Menu
    </button>
  </nav><!-- #site-navigation -->
</header><!-- #masthead -->