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向左浮动并保留在父块中而不会破坏其余的布局。

我会将overflow: auto应用于.site-header来创建块格式化上下文，这将使浮动元素不会干扰布局中的任何其他元素。

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

我假设你想要一行，但请澄清。

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

＆＃13;

.main-navigation

＆＃13;

.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;
}

＆＃13;

Answer 2

请按以下说明更新css

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

并从主导航类中删除width:100%。

我希望这对你有用。

但为了获得更好的结果，请始终在css中使用float:left来执行相同的操作，因为内联显示我认为在IE7中不起作用

如果您仍有同样的问题，请与我们联系。

Answer 3

试试这个，

.site-branding{
width:50%;
display:inline-block
}

和

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

显示内联两个div

3 个答案: