HTML 中top栏里的内容出来了是怎么回事？

Question

HTML 中top栏里的内容出来了是怎么回事？

发布于
2017-03-17

<body>
    <div id="top">
        <ul class="top_menu">
            <li><a href="#">Account Sign In</a></li>
            <li><a href="#">Register</a></li>
            <li><a href="#">Buyers Guide </a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li class="no_dot"><a href="#">Contact</a></li>
        </ul>
        <ul class="top_bar">
            <li class="phone">130 0687 3886</li>
            <li class="help"><a href="#">live help</a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>

// ---样式重置---
body,ul,p,h1,h2,h3,h4,dl,dd,form,input,textarea,select{ 
    padding: 0; 
    margin: 0; 
    font-family: arial;
} //英文网站一般都是Arial字体
ul{
    margin: 0;
    padding: 0;
}
li{
    margin: 0;
    padding: 0;
}
img { 
    border: none; 
}
li { 
    list-style: none;
}
a { 
    text-decoration: none;
     }
a:hover { 
    text-decoration: underline;

     }

body { 
    background: #fff url(../images/body_bg.png) repeat-x;
}


/*---top gose here---*/

#top { 
    width: 960px; 
    height: 30px; 
    margin: 0 auto;
    background-color: #fff;
}
.top_menu { 
    float: left; 
}
.top_menu li { 
    float: left;
    background: url(../images/top_ico.png) no-repeat right 14px;
    font-size: 13px; 
    line-height: 30px; 
    padding-right: 18px; 
    margin-right: 15px; 
}
.top_menu a { 
    color: #c0c0c0; 
}
.top_menu a:hover {}
.top_menu .no_dot {}

.top_bar { 
    float: right; 
}
.top_bar li {
    float: right; 
}

top背景是黑条30像素没问题，图片描述