html - 标题栏的内容没有对齐

Question

上面页面中栏的内容没有对齐。

我试图让它们排成一行，但它们没有对齐。

这是 fiddle 的链接:https://jsfiddle.net/xgvqzhmh/

<div class="container">
    <div class="header">
        <div class="f">

            <section class="wrapper">

              <section class="material-design-hamburger">
                <button class="material-design-hamburger__icon">
                  <span class="material-design-hamburger__layer"></span>
                </button>
              </section>

              <section class="menu menu--off">
                <div>Android's Material Design Hamburger Animation</div>
              </section>

            </section>          
        </div>
        <div class="type">
            <div class="daily">Daily</div>
            <div class="dropdown"></div>
        </div>
        <div class="last"><img src="../Images/ic_action_overflow.png" width="35px" ></div>
    </div>

谢谢

Answer 1

应该这样做(https://jsfiddle.net/xgvqzhmh/5/):

.header{
  display: table;
  width: 100%;
  height: 80px;
  background-color: #26A69A;
  -webkit-filter:drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.4));
}
.hamburger{
  margin-left: 50px;
  width: 2%;
}
.type{
  width: 88%;
}
.daily{
  border-bottom: 2px solid #90CAF9;
  width: 80px;
}
.last{
  width: 3%;
  cursor: pointer;
}
.f, .type, .last {
  display: table-cell;
}