Underscores - côte à côte DIVs

Question

Je joue avec CSS et Underscores. J'ai essayé de placer deux DIV côte à côte, mais je n'ai aucune idée de comment faire ça.

This is what I have and what I want to achieve

Première idée: définir ces éléments comme des éléments en ligne. Facile à dire, pas facile à faire.

Il y avait une question très similaire il y a quelques années: Side by Side DIVs in Wordpress/Underscores

J'ai essayé ce code:

.site-branding { 
 
    clear: none; 
 
    display: inline; 
 
    } 
 

 
.site-title { 
 
    clear: none; 
 
    display: inline; 
 
    } 
 

 
.main-navigation { 
 
    display: inline; 
 
    }

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

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

sans résultat (que mon fond d'en-tête a disparu). Je n'ai aucune idée de ce que je fais mal (encore débutant en CSS), donc je serai extrêmement reconnaissant de me cibler. Je pensais que le réglage clair: aucun pour un élément signifie "ne l'efface pas, quels que soient les éléments qui le dominent" (assez logique pour moi).

Ceci est un "clair" Insiste modèle, de sorte que l'ensemble CSS se trouvent ici: https://github.com/Automattic/_s/blob/master/style.css

Answer 1

HTML:

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

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

CSS:

.site-branding { 
    clear: none; 
    display: inline; 
    } 

.site-title { 
    clear: none; 
    display: inline-block; 
    width:30%; 
    } 

.main-navigation { 
    display: inline-block; 
    width:50%; 
    } 

ul >li{ 
display: inline-block; 
} 

FIDDLE