缩小浏览器窗口时，HTML div项重叠

Question

为什么我的<ul>项目在第一张图片中重叠？ （当我缩小浏览器窗口时）

全屏浏览器中的一切看起来都很好:(第二张图片）

这是我的CSS的样子：

.navMain {

    float:right;
    margin:-60px 0px;

}

.navMain ul {

    margin:0px;
    padding:0px;

}

.navMain ul li {


    padding-right:80px;
    list-style:none;
    display:inline;

}

HTML：

<div class="navMain">

            <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Most Liked</a></li>
                    <li><a href="#">FAQ</a></li>
            </ul>

</div> <!-- END navMain -->

Answer 1

添加float:left

.navMain ul {

    margin:0px;
    padding:0px;
    float:left;
}

或float:right取决于设计。