移动端与桌面端<ul>内联显示及<p>与<ul>同行实现问题咨询

问题分析 #

你的代码存在几个关键问题导致需求未达成：

• CSS选择器层级错误，.div-Cuisine下的子元素规则缺少正确关联
• 使用float布局在移动端适配性差，易出现排版混乱
• PHP代码中存在多余的<ul>标签，可能引发样式异常
• 未针对移动端设置响应式适配规则

修正后的完整代码 #

HTML/PHP 部分

<style>
.div-Cuisine {
  margin: 1rem 0;
}
/* 分类组容器：用Flex实现段落与列表同行 */
.cuisine-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.cuisine-group p {
  margin: 0 0.5rem 0 0;
  white-space: nowrap;
}
.cuisine-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* 用CSS伪元素添加列表项逗号，避免末尾多余符号 */
.cuisine-group ul li::after {
  content: ",";
}
.cuisine-group ul li:last-child::after {
  content: "";
}
/* 移动端适配：保持内联布局，空间不足时自动换行 */
@media (max-width: 768px) {
  .cuisine-group {
    flex-direction: row;
  }
  .cuisine-group ul {
    flex-wrap: wrap;
  }
}
</style>
<div class="div-Cuisine">
<?php
// 展示Recipe Cuisines分类
$terms = get_terms(
  array(
    'post_type' => 'recipe',
    'taxonomy' => 'cuisine',
    'hide_empty' => false,
    'order' => 'asc'
  )
);
?>
<div class="cuisine-group">
  <p>美食分类: </p>
  <ul>
    <?php foreach ($terms as $term): ?>
    <li><a href="<?php echo get_term_link($term); ?>"><?php echo $term->name; ?></a></li>
    <?php endforeach; ?>
  </ul>
</div>

<?php
// 展示Recipe Types分类
$terms = get_terms(
  array(
    'post_type' => 'recipe',
    'taxonomy' => 'recipe_type',
    'hide_empty' => false,
    'order' => 'asc'
  )
);
?>
<div class="cuisine-group">
  <p>菜谱类型: </p>
  <ul>
    <?php foreach ($terms as $term): ?>
    <li><a href="<?php echo get_term_link($term); ?>"><?php echo $term->name; ?></a></li>
    <?php endforeach; ?>
  </ul>
</div>
</div>

关键修改说明 #

• 新增.cuisine-group容器，通过Flex布局稳定实现<p>与<ul>的同行对齐，flex-wrap: wrap保证空间不足时自动换行
• 用CSS伪元素替代PHP手动添加逗号，避免末尾出现多余符号
• 统一清除列表默认样式，彻底解决移动端项目符号问题
• 响应式媒体查询确保移动端保持内联布局，可调整max-width适配不同设备
• 修复原PHP代码中多余的<ul>标签，精简结构

内容的提问来源于stack exchange，提问作者Jerry Christensen