显示内嵌两个div

我有这样的HTML代码：显示内嵌两个div

<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，品牌和＃网站导航安排。

我试图这样做，但没有工作

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

什么是错误的代码？

编辑：

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

这是网站：

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

提前感谢！

来源

2015-03-02 Elena Vesvina

'＃站点navigation' div元素有一个类'主navigation'可能有一些css规则覆盖你描述的规则！ – 2015-03-02 12:26:04

我把代码放在.main-navigation – 2015-03-02 12:28:50

在哪个浏览器中测试它？ – 2015-03-02 12:38:41

它看起来像你正在修改一个WordPress主题，这意味着有其他CSS规则发挥作用。

它看起来像你想要.site-branding和.main-navigation浮动到左侧，并保留在父块中，而不会破坏布局的其余部分。

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

将width的.site-branding设置为足够小的值以允许.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 -->

来源

2015-03-02 12:47:55

但为什么当我把我的网站上的代码不工作？ – 2015-03-02 12:55:20

上的jsfiddle我看见你把代码的作品，但只适用于现场 – 2015-03-02 12:58:09

有可能是影响您的其他元素的CSS规则。当你说“不工作”时，布局如何表现？你需要更具体，否则我们都在猜测你正在尝试做什么。 – 2015-03-02 13:03:13

下面

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

给出请更新CSS和从主导航类中删除width:100%。

我希望这会对你有用。

但获得更好的结果总是用float:left在CSS中做同样的事情，因为内嵌显示，我认为不会在IE7

的工作，请让我知道如果你仍然有同样的问题。

来源

2015-03-02 12:35:47

试试这个，

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

和

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

来源

2015-03-02 12:50:11 Logz

显示内嵌两个div

回答

相关问题