html - 样式 "applike"标题菜单

Question

我想制作一个“类似应用”的标题:

所以左边有一个图标，后面是 Logo 和菜单容器，右边是另一个图标。

JSFiddle

这是我的 html 代码:

<div id="header">
  <div class="headerleft">
    left icon
  </div>    
  <div class="headercontainer">
    <div class="headerlogo">
      logo
    </div>
    <div class="headermenu">
      menu
    </div>
  </div>
  <div class="headerright">
    right icon
  </div>    
</div>

这是我的CSS代码:

#header {
  width:100%;
  height:6%;
  background-color:#ffffff;
  box-shadow: 1px 1px 5px #888888;
}
  .headerleft {
  width:20%;
}
  .headercontainer {
  width:60%;
}
  .headerlogo {
  width:50%;
}
  .headermenu {
  width:50%;
}
  .headerright {
  width:20%;
}

Answer 1

http://jsfiddle.net/BatML/1/

你有......小心，你用 # 代替 调用你的 fiddle 中的类。

一切都是关于:

float:left;