SOURCE

<div id="menu">
  <div id="logo">
    <img src="http://www.zhujianbook.com/templets/default/images/logo.gif"
    alt="" seyle="float:left" />
  </div>
  <div class="nav-srh">
          <input name="q" type="text" title="" size="22" maxlength="60" value=""
          name="s" id="bdcs-search-form-input" autocomplete="off" dir="ltr" placeholder="输入书名搜索...">
        <span>
          <input type="submit" id="bdcs-search-form-submit" value="搜索">
        </span>
      </div>
  <div class="nav-anon">
<ul class="menu">
      <li>
        <a href="index.html" class="nav">
          首页
        </a>
      </li>
      <li class="divider">
      </li>
      <li>
        <a href="product.html" class="nav">
          图书
        </a>
      </li>
      <li class="divider">
      </li>
      <li>
        <a href="about.html" class="nav">
          关于
        </a>
      </li>
      <li class="divider">
      </li>
      <li>
        <a href="faqs.html" class="nav">
          服务
        </a>
      </li>
      <li class="divider">
      </li>
      <li>
        <a href="checkout.html" class="nav">
          结算
        </a>
      </li>
      <li class="divider">
      </li>
      <li>
        <a href="contact.html" class="nav">
          联系
        </a>
      </li>
    </ul>
  </div>
</div>

#menu {
  position: relative;
  border: 1px solid red;
  background-color: #00FFFF;
  height: 60px;
  display: flex;
  flex-direction: row;
}

#logo {
  display: flex;
  flex: 3;
}

.nav-srh {
  display: flex;
  flex: 3;
  justify-content: center;
  align-items: center;
}
.nav-anon {
  display: flex;
  flex: 4;
  justify-content: center;
  align-items: center;
}
ul.menu {
  /*设置菜单列表的样式*/
  list-style-type: none;
  /*不显示项目符号*/
  float: left;
  /*向左浮动*/
  display: block;
  /*块级元素*/
  width: 982px;
  margin: 0px;
  padding: 0px;
}

ul.menu li {
  /*设置菜单列表项的样式*/
  display: inline;
  /*内联元素*/
  font-size: 12px;
  font-weight: bold;
  /*字体加粗*/
  line-height: 36px;
  /*行高36px*/
}

ul.menu li.divider {
  /*菜单项分隔线的样式*/
  display: inline;
  /*内联元素*/
  width: 4px;
  height: 36px;
  float: left;
  /*向左浮动*/
  background: url(../images/menu_divider.gif) no-repeat center;
  /*背景图像居中对齐无重复*/
}

a.nav:link,
a.nav:visited {
  /*菜单项未访问过链接、访问过链接的样式*/
  display: block;
  /*块级元素*/
  float: left;
  /*向左浮动*/
  padding: 0px 8px 0px 8px;
  /*上、右、下、左的内边距依次为0px,8px, 0px,8px*/
  margin: 0 14px 0 14px;
  /*上、右、下、左的外边距依次为0px,14px, 0px,14px*/
  height: 36px;
  text-decoration: none;
  /*链接无修饰*/
  text-align: center;
  /*文字居中对齐*/
  color: #fff;
  /*白色文字*/
}

a.nav:hover {
  /*鼠标悬停链接的样式*/
  display: block;
  /*块级元素*/
  float: left;
  /*向左浮动*/
  padding: 0px 8px 0px 8px;
  margin: 0 14px 0 14px;
  height: 36px;
  text-decoration: none;
  /*链接无修饰*/
  text-align: center;
  /*文字居中对齐*/
  color: #ccc;
  /*灰色文字*/
}