一般的首页导航栏并列写法 - 将两个div同行并列

设置两个div的display:inline-block

* {
  margin: 0;
  padding: 0;
}
.header {
  width: 100%;
  height: 60px;
  background-color: #191d3a;
}
.logo {
  width: 100px;
  height: 60px;
}
.navs {
  text-align: center;
  display: inline-block;					//将图片与后面div并列
  width: 80%;
  height: 60px;
}
.header  a {
    display: inline-block;				//将所有链接文字并列
    height: 60px;
    width: 100px;
    color: red;
    text-decoration: none;
  }

效果图如下：

问题1：两个div并排出现错位

解决：.navs 下增加overflow:hidden;

 

将文字垂直居中：

.header a 下增加 vertical-align: middle;并将heigh改为line-height