通過給ul設定寬度width，來控制頁面顯示幾個li，你是水平居中顯示的，具體的間距通過li的margin來設定：

<div class="navContent" id="newGoods">
    <ul>
        <li>
            <img src="images/lb-image1.png"/><br/>
            <span>￥199</span><br/>
            <div>WIS玻尿酸極潤面膜24片 補水保溼提亮膚色收縮毛孔正品學生男女士</div>
        </li>
        <li>
            <img src="images/lb-image2.png"/><br/>
            <span>￥199</span><br/>
            <div>WIS玻尿酸極潤面膜24片 補水保溼提亮膚色收縮毛孔正品學生男女士</div>
        </li>

注：圖片格式為240*240，span和div文字為圖片詳情描述，居圖片下面顯示；

.navContent {
    width: 100%;
    margin: 0 auto;
}

.navContent ul{
    width: 560px;
    margin: 0 auto;
    overflow: auto;
}

.navContent ul li {
    width: 240px;
    margin:20px 20px 20px;
    float: left;
    word-break: break-all;
    word-wrap: break-word;
}

.navContent li span {
    font-size: 1.4rem;
    color: red;
}

/*li三列顯示*/
@media screen and (min-width:840px) and (max-width:991px){
    .navContent ul{
        width: 840px;
        margin: 0 auto;
        overflow: auto;
    }
}

其他多少個li的個數居中顯示，根據需要來，主要在ul的寬度設定和li的margin調節；

加油，多思考，多嘗試，不驕不躁，一切問題都可以解決，還有溝通很重要~