如何用CSS正确排列<ul>实现移动端两行布局（WordPress自定义CSS）

这是 <ul>元素，我希望通过CSS在移动端将其排布为两行。我正在使用WordPress，因此仅能通过自定义CSS选项完成样式调整。

实现方法 #

直接将代码粘贴到WordPress的「自定义 -> 额外CSS」面板即可生效，全程不需要修改主题源文件：

/* 移动端适配规则：仅在屏幕宽度小于768px的设备上生效 */
@media (max-width: 768px) {
  /* 替换为目标ul元素的实际类名 */
  .target-list-ul {
    display: flex;
    flex-wrap: wrap; /* 允许列表项自动换行 */
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .target-list-ul li {
    width: 50%; /* 每个列表项占容器一半宽度，自动排布为两行 */
    box-sizing: border-box; /* 避免内边距撑破容器宽度导致布局错位 */
  }
}

操作提示 #

• 快速获取目标ul类名：打开对应页面预览，右键点击目标ul元素，选择「检查」调出浏览器开发者工具，高亮选中元素对应的class属性值就是需要替换的选择器
• 布局微调：
  • 如需调整列表项间距，直接为li元素添加padding或margin属性即可，不会破坏两行布局规则
  • 如需调整列表项对齐方式，可给ul元素添加justify-content: center（内容居中）或justify-content: space-between（两端对齐）属性做适配

内容的提问来源于stack exchange，提问作者sanket kheni