Question

我正在玩CSS和Underscores。我试图并排放置2个DIV，但它不知道该怎么做。

This is what I have and what I want to achieve

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

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

我已尝试过此代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

我不知道我做错了什么（仍然是CSS的新手），所以我会非常感谢我的目标。我认为，设置清楚：没有元素意味着＆＃34;不清除它，无论最重要的元素＆＃34; （对我来说很合乎逻辑）。

这是一个明确的＆＃34;下划线模板，所以可以在这里找到整个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

1 个答案: