元素并排？

Question

我有一个h1和一个nav元素。我希望他们能并排坐下。

我该怎么做？

Fiddle

<header>
<h1>This is the title</h1>
<nav>
    <span id="search"><input type="text" name="search" placeholder="Search"></div>
    <span id="btn-close">&times;</div>
</nav>
</header>

Answer 1

以下是您可能正在关注的内容：

h1{
    width: 50%;
    display: inline-block;
    margin-right: -4px;
}

nav{
    display: inline-block;
    width: 50%;
}

demo

Answer 2

h1{
    width: 50%;
    float: left;
}

nav{
    width: 50%;
    float: left;
}

Answer 3

首先，您使用span关闭div。

应该是：

<header>
  <h1>This is the title</h1>
  <nav>
    <span id="search"><input type="text" name="search" placeholder="Search"></span>
    <span id="btn-close">&times;</span>
  </nav>
</header>

其次，你有几个选择让它们并排：

你可以这样做：

h1, nav{
  float:left;
  width:50%;
}

Example

或：

h1, nav{
  display:inline;
  width:50%;
}

Example

如果两个css元素具有相同的规则，您可以通过在元素之间放置,将它们放在一起（如上例所示）。

Answer 4

<强> Demo Fiddle
CSS

h1{
    display:inline;
}
nav{
    display:inline;
}