下划线 - 并排 DIV

Question

我正在研究 CSS 和下划线。我试着并排放置 2 DIV，但它不知道该怎么做。

This is what I have and what I want to achieve

第一个想法：将这些项目设置为内联元素。说起来容易，做起来不容易。

几年前有一个非常相似的问题： Side by Side DIVs in Wordpress/Underscores

我试过这个代码：

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

没有结果（只有我的 header 背景消失了）。

我不知道我做错了什么（在 CSS 还是新手），所以我将非常感谢您针对我。我想，设置 clear: none 对于一个元素意味着 "do not clear it, regardless of the overriding elements" （对我来说很合乎逻辑）。

这是一个 "clear" 下划线模板，所以整个 CSS 可以在这里找到： 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

下划线 - 并排 DIV

Underscores - side by side DIVs

css

wordpress

underscores-wp