P标签加了-之后怎么就竖起来了，hover怎么是从上面出现的

Question

使用纯数字就是正常的横向，加了-之后为什么会竖起来
它为什么是从上面移动下来的
而且紧贴着文字

HTML

<div class="header">
    <div class="header_logo" center><a href="#"><img src="image/logo.png" ></a></div>
    <div class="header_message"></div>
    <div class="headder_phone"><p>400-1234-789</p></div>
    <div class="nav">
            <a href="#">首页</a>
            <a href="#">走进沈小福</a>    
            <a href="#">产品中心</a>    
            <a href="#">加盟合作</a>    
            <a href="#">新闻中心</a>    
            <a href="#">联系我们</a>        
    </div>
</div>

CSS

 .header{
    height: 88px;
    width: 100%;
    background: #FFFFFF;
    position: fixed;
    z-index: 99999;
}
.header_logo{
    float: left;
    height: 60px;
    margin-left: 100px;
    margin-top: 12px;
}
.nav{
    height: 40px;
    float: left;
    margin-left: 700px;
    margin-top: 30px;
}

.nav a{
    float: left;
    margin-right: 50px;
    font-size: 16px;
    transition: .5s;
}
.nav a:hover{
    color:#00ff7f;
    background: url(../image/header_Icon.jpg) no-repeat bottom;
    
}

.headder_phone{
    width: 30px;
    height: 30px;
    float: right;
    background: url(../image/phone%20.png)no-repeat;
    margin-top: 28px;
    margin-right: 120px;
}
.headder_phone p{
    margin-left: 30px;
}
.header_message{
    width: 30px;
    height: 30px;
    float: right;
    background: url(../image/message.png)no-repeat;
    margin-top: 25px;
    margin-right: 90px;
}

怎么达不到这个效果

Answer 1

应该是宽度不够，换行了，你把宽度弄宽一点