Показать инлайн две дивы

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{display:inline-block;} 

Что неправильно в этом коде?

EDIT:

.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 из .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 -->

Answer 2

Пожалуйста, обновите CSS, как указано ниже

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

и удалить width:100% из вашего основного навигационного класса.

Я надеюсь, что это сработает для вас.

Но лучшие результаты всегда использовать float:left в CSS, чтобы сделать те же самые вещи, потому что встроенный дисплей, я думаю, что не будет работать в IE7

Пожалуйста, дайте мне знать, если у вас еще есть такая же проблема.

Answer 3

Попробуйте это,

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

и

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