twitter-bootstrap - 在同一行获取 span 和 h3

Question

这应该很简单，但它让我望而却步。我只希望我的 span 和 h3 出现在同一行上，一个挨着另一个，但它们出现在不同的行上。有人可以帮我吗？

header {
  background-color: black;
  color: white;
  padding: 10px;
  width: 100% !important;
  display: flex;
}

header .glyphicon {
  font-size: 1.5em;
  margin: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<header>
  <span class="glyphicon glyphicon-menu-hamburger"></span>
  <h3>Home</h3>
</header>

Answer 1

发生这种情况是因为浏览器将默认样式应用于 h3 元素。一种快速解决方法是向 h3 添加 display: inline; 样式。

header {
  background-color: black;
  color: white;
  padding: 10px;
  width: 100% !important;
  display: flex;
}

header .glyphicon {
  font-size: 1.5em;
  margin: 5px;
}

h3 {
  display: inline;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<header>
  <span class="glyphicon glyphicon-menu-hamburger"></span>
  <h3>Home</h3>
</header>