如何创建一个3列(ul，li)标题，该标题(响应)一个折叠在另一个下面

Question

小提琴在这里

我有一个非常奇怪的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中添加了上面的代码后，正文内容和页脚都可以了。现在它们都有响应了。

我想要实现的目标：

1. top-header类中的3rd li应该消失-完成
2. 在768断点中崩溃期间，top-header类中的2nd and 1st li应为同一行的centered-未完成
3. 2nd li应该位于top-header类中的第三个li下方，并且应该都居中-未完成

现在CCD_ 11li在左侧/漂浮在左侧彼此相邻。我怎样才能把它们集中起来？第三点怎么样？

小提琴在这里

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">
	<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>