縮小瀏覽器窗口時，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視設計而定。