如何创建一个 3 列 (ul, li) header（响应式）将一个列折叠到另一个列之下？

Question

fiddle就是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

中有了这些 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%;}

然后我在 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; } 
    }

我在responsive.css中添加了上面的代码后，body内容和页脚就可以了。那些现在有反应了。

我想达到的目标：

3rd li 在 top-header class 应该消失 - 完成
2nd and 1st li in the top-header class should be centered in the same line during collapse in 768 breaking point - NOT done
2nd li 应该低于 top-header class 中的第 3 里并且应该都居中 - 未完成

现在 1st & 2nd 里在左边 side/floting 彼此相邻。我怎样才能让那些居中？那么第三点呢？

fiddle就是HERE

Answer 1

试试这个

.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">
 <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="http://asiamediaglobal.net/riffaz/athavaneng-for-live-test/wp-content/uploads/2015/05/language_selection.png"></li>
     <li><img src="http://asiamediaglobal.net/riffaz/athavaneng-for-live-test/wp-content/uploads/2015/05/language_selection.png"></li>
     <li><img src="http://asiamediaglobal.net/riffaz/athavaneng-for-live-test/wp-content/uploads/2015/05/language_selection.png"></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>

Answer 2

根据上面的评论，这里是答案。只需从 li 中删除 float 属性并为 ul 属性应用一些小宽度并使用 margin:0px auto 使其居中。

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

DEMO

如何创建一个 3 列 (ul, li) header（响应式）将一个列折叠到另一个列之下？

How to create a 3 column (ul, li) header that (responsive) collapse one below another?

html

css

responsive-design