在移动设备和桌面设备上以内联方式显示无序列表。我做错了什么？

问：

我当前的编码在桌面上显示内联，但在移动设备上不显示。另外，如何使该部分与 ？<ul><p><ul>

我尝试了以下代码。我添加了 以防止样式影响页面的其余部分。我认为它起作用了，然后我检查了移动设备，发现内联格式没有反映出来。该列表每行提供一个项目符号。我该怎么办？.div-Cuisine

<style>
.div-Cuisine{
ul li{
  display: inline;
  list-style-type: none;
}
p, ul {
    float: left;
    margin: 0;
    padding: 0;
}
li {
    list-style-type: none;
}
}
</style>
<div class="div-Cuisine"><?php
 
//Display a list of all the categories of custom post types
 
$terms = get_terms(
         array(
                'post_type'   => 'recipe',
                'taxonomy'   => 'cuisine', // Custom Post Type Taxonomy Slug
                'hide_empty' => false,
                'order'         => 'asc'
            )
         );
 
echo '<p>Recipe Cuisines: </p><ul>';

echo '<ul>'; 

foreach ($terms as $term) {
        echo '<li><a href="'.get_term_link($term).'">'.$term->name.'</a>, </li> ';
    }
 
echo '</ul>';
 
?>
<?php
 
//Display a list of all the categories of custom post types
 
$terms = get_terms(
         array(
                'post_type'   => 'recipe',
                'taxonomy'   => 'recipe_type', // Custom Post Type Taxonomy Slug
                'hide_empty' => false,
                'order'         => 'asc'
            )
         );
 
echo '<p>Recipe Types: </p>';
 
echo '<ul>';
 
foreach ($terms as $term) {
        echo '<li><a href="'.get_term_link($term).'">'.$term->name.'</a>, </li> ';
    }
 
echo '</ul>';
 
?>
</div>

目前，移动视图是一个带有项目符号的长列表。如果

部分与 桌面视图：