如何創建一個3列（ul，li）標題（響應）將一個在另一個之下摺疊？

Question

的小提琴是HERE

我有一個非常奇怪的HTML結構舊網站。 客戶要求我做出反應。

我需要這個網站需要從突破點768px行爲響應。

我已經改變了HTML結構位如下：

<div id="tm_container"> 
    <div id="backtotop"></div> 
    <div class="tm_header_file"> 
     <div class="social_bar"> 
      <div style="clear:both;"></div> 
      <div class="top-header"> 
       <ul> 
        <li><img src="#"><li> 
        <li><img src="#"><li> 
        <li><img src="#"><li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div style="clear:both;"></div> 

    <div class="tm_menu_desktop"> 
     <!-- desktop navigation --> 
    </div> 

    <div class="tm_menu_mobile"> 
     <!-- mobile navigation --> 
    </div> 

    <div class="tm_content"> 
     <!-- Contents --> 
    </div> 
    <div class="clear"></div> 

    <div class="tm_footer"> 
     <!-- Footer code --> 
    </div> 
</div> 

我已經有style.css

.top-header ul li { float: left; width: 13.2%; padding: 21px 4px 0;} 
.top-header ul li:first-child { width: 12.75%; padding: 0;} 
.top-header ul li:last-child { width: 73.1%; padding: 0;} 
.top-header ul li a img { width: 100%;} 

這些CSS代碼，然後我創建媒體查詢作爲跟隨responsive.css：

@media (max-width: 768px) { /* responsive - starts from iPad portrait view */  
     #tm_container { padding: 0 1%;} 
     .tm_menu_desktop { display: none;} 
     .tm_header_file { width: 100%; } 
     .tm_content { display: inline-block; width: 100%; } 
     .top-header ul li, .top-header ul li:first-child { width : auto;} 
     .top-header ul li a img { width : 132px; } 
     .top-header ul li:last-child { display: none; } 
    } 

當我在添加上面的代碼後身體內容和頁腳都可以。那些現在是敏感的。

我想達到的目標：

1. 在top-header類3rd li應該消失 - 做
2. 2nd and 1st李時珍在top-header類768斷裂點崩潰時，應在同一行centered - 未完成
3. 2nd li應該在top-header類別下面的第3個裏面，並且應該都是居中 - 未完成

現在1st & 2nd li在左側/左側相鄰。我怎樣才能讓他們居中？ 第三點呢？

的小提琴是HERE

Answer 1

根據上述評論，這裏就是答案。只需從li中刪除float屬性，然後爲ul屬性應用一些小寬度，並使用margin:0px auto使其成爲中心。

.top-header ul{width:100px; margin:0px auto;} 
.top-header ul li{float:none;} 

DEMO

Answer 2

試試這個

.top-header ul { list-style: none; margin: 0; padding: 0; text-align: center;} 
 
.top-header ul li { float: left; width: 13.2%; padding: 21px 4px 0;} 
 
.top-header ul li:first-child { width: 12.75%; padding: 0;} 
 
.top-header ul li:last-child { width: 73.1%; padding: 0;} 
 
.top-header ul li a img { width: 100%;} 
 

 
@media (max-width: 768px) { /* responsive - starts from iPad portrait view */  
 
     #tm_container { padding: 0 1%;} 
 
     .tm_menu_desktop { display: none;} 
 
     .tm_header_file { width: 100%; } 
 
     .tm_content { display: inline-block; width: 100%; } 
 
     .top-header ul li, .top-header ul li:first-child { width : 100%;} 
 
     .top-header ul li a img { width : 132px; } 
 
     .top-header ul li:last-child { display: none; } 
 
    }

<div id="tm_container"> 
 
\t <div id="backtotop"></div> 
 
\t <div class="tm_header_file"> 
 
\t \t <div class="social_bar"> 
 
\t \t \t <div style="clear:both;"></div> 
 
\t \t \t <div class="top-header"> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><img src="http://asiamediaglobal.net/riffaz/athavaneng-for-live-test/wp-content/uploads/2015/05/language_selection.png"></li> 
 
\t \t \t \t \t <li><img src="http://asiamediaglobal.net/riffaz/athavaneng-for-live-test/wp-content/uploads/2015/05/language_selection.png"></li> 
 
\t \t \t \t \t <li><img src="http://asiamediaglobal.net/riffaz/athavaneng-for-live-test/wp-content/uploads/2015/05/language_selection.png"></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div style="clear:both;"></div> 
 
\t 
 
\t <div class="tm_menu_desktop"> 
 
\t \t <!-- desktop navigation --> 
 
\t </div> 
 
\t 
 
\t <div class="tm_menu_mobile"> 
 
\t \t <!-- mobile navigation --> 
 
\t </div> 
 
\t 
 
\t <div class="tm_content"> 
 
\t \t <!-- Contents --> 
 
\t </div> 
 
\t <div class="clear"></div> 
 
\t 
 
\t <div class="tm_footer"> 
 
\t \t <!-- Footer code --> 
 
\t </div> 
 
</div>