放在一行中的标头元素

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

默认情况下，Form元素是块。将其样式设置为display: inline，或用表单包装标头(因此所有元素都在表单中)。