标题元素放在一行中

Question

我有7个元素，我想放在我的html标题部分。

但是当我在标题部分逐个放置这7个元素时，这些元素并不位于一行中。

这就是我想要做的结构：

但输出看起来像那样 -

这是我的代码 -

  <header>
    <div class="mdl-layout-icon">
      <!-- icon -->
      <img src="public/images/bower.png" alt="office" height="42" width="82">
      <form action="#">
        <!-- TextField -->
        <input class="mdl-textfield__input" type="text" id="searchText">
        <label class="mdl-textfield__label" for="searchText">Search</label>
        <!-- Button -->
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Search</button>
      </form>
      <!-- Shopping Cart -->
      <i class="material-icons">&#xE8CC;</i>
      <!-- Quantity -->
      <label for="quantity">quantity</label>
      <!-- Price -->
      <label for="price">price</label>
      <!-- CheckOut -->
      <i class="material-icons">&#xE877;</i>
    </div>
  </header>

任何人都知道如何解决这个问题！

Answer 1

默认情况下，表单元素是一个块。将其样式设置为display: inline，或使用表单包装标题（因此所有元素都在表单内）。