Html 如何创建一个3列（ul、li）标题，使其（响应）一个接一个地折叠？

小提琴是

我有一个非常奇怪的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>

然后我在

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

中添加上述代码后，正文内容和页脚就可以了。现在这些都是有反应的

我想要达到的目标：

top header

类中的

3rd li

应消失-完成

768断点塌陷期间，
top header
类中的
2nd和1st
li应
居中
在同一行中-未完成

2nd li

应位于

顶部标题中的3rd li下方

类中，且应居中-未完成

目前，第一和第二排的李排在左边，相互挨着。我怎样才能把它们放在中心？ 第三点怎么样

小提琴是

试试这个

.top header ul{列表样式：无；边距：0；填充：0；文本对齐：居中；}
.顶部标题ul li{浮动：左侧；宽度：13.2%；填充：21px 4px 0；}
.top header ul li:第一个子项{宽度：12.75%；填充：0；}
.top header ul li:最后一个子项{宽度：73.1%；填充：0；}
.顶部标题ul li a img{宽度：100%；}
@媒体（最大宽度：768px）{/*响应-从iPad纵向视图开始*/
#tm_容器{填充：0 1%；}
.tm_菜单_桌面{显示：无；}
.tm_头文件{宽度：100%；}
.tm_内容{显示：内联块；宽度：100%；}
.top header ul li，.top header ul li:第一个子项{宽度：100%；}
.顶部标题ul li a img{宽度：132px；}
.top标头ul li:最后一个子项{显示：无；}
}

根据上面的评论，以下是答案。只需从li中删除

float

属性，并为

ul

属性应用一些小宽度，然后使用

margin:0px auto

使其居中

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

---

r你看起来像这样吗？wwuu。。是 啊确实是这样。。float:none和margin:0 auto完成了这个任务。。你能回答这个问题吗？我将接受并投票支持你。。

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