将HTML模板转换为Wordpress主题后出现问题。我使用的是名为Adda的社交媒体主题，底部的滚动条显示了活动用户，这些活动用户显示的是堆叠在一起的活动用户，而不是您可以滚动浏览的行。由于HTML和CSS是预制的，所以我想问题出在我的functions.php中，但是我已经包含了HTML和CSS，我认为这可能会有所帮助。任何帮助将不胜感激。
What mine looks like in mobile
这是我的功能。php
<?php
//load stylesheets
function load_stylesheets()
{
wp_register_style('bootstrap', get_template_directory_uri() . '/assets/css/vendor/bootstrap.min.css', array(), 1, 'all');
wp_enqueue_style('bootstrap');
wp_register_style('bicon', get_template_directory_uri() . '/assets/css/vendor/bicon.min.css', array(), 1, 'all');
wp_enqueue_style('bicon');
wp_register_style('flaticon', get_template_directory_uri() . '/assets/css/vendor/flaticon.css', array(), 1, 'all');
wp_enqueue_style('flaticon');
wp_register_style('plyr', get_template_directory_uri() . '/assets/css/plugins/plyr.css', array(), 1, 'all');
wp_enqueue_style('plyr');
wp_register_style('slick', get_template_directory_uri() . '/assets/css/plugins/slick.min.css', array(), 1, 'all');
wp_enqueue_style('slick');
wp_register_style('nice', get_template_directory_uri() . '/assets/css/plugins/nice-select.css', array(), 1, 'all');
wp_enqueue_style('nice');
wp_register_style('perfect', get_template_directory_uri() . '/assets/css/plugins/perfect-scrollbar.css', array(), 1, 'all');
wp_enqueue_style('perfect');
wp_register_style('lightgallery', get_template_directory_uri() . '/assets/css/plugins/lightgallery.min.css', array(), 1, 'all');
wp_enqueue_style('lightgallery');
wp_register_style('style', get_template_directory_uri() . '/assets/css/style.css', array(), 1, 'all');
wp_enqueue_style('style');
wp_register_style('custom', get_template_directory_uri() . '/custom.css', array(), 1, 'all');
wp_enqueue_style('custom');
}
add_action('wp_enqueue_scripts', 'load_stylesheets');
//load scripts
function addjs()
{
wp_register_script('modernizr', get_template_directory_uri() . '/assets/js/vendor/modernizr-3.6.0.min.js', array(), 1, 1, 1);
wp_enqueue_script('modernizr');
wp_register_script('jquery', get_template_directory_uri() . '/jquery-3.3.1.min.js', array(), 1, 1, 1);
wp_enqueue_script('jquery');
wp_register_script('popper', get_template_directory_uri() . '/assets/js/vendor/popper.min.js', array(), 1, 1, 1);
wp_enqueue_script('popper');
wp_register_script('bootstrap', get_template_directory_uri() . 'assets/js/vendor/bootstrap.min.js', array(), 1, 1, 1);
wp_enqueue_script('bootstrap');
wp_register_script('slick', get_template_directory_uri() . 'assets/js/plugins/slick.min.js', array(), 1, 1, 1);
wp_enqueue_script('slick');
wp_register_script('nice', get_template_directory_uri() . 'assets/js/plugins/nice-select.min.js', array(), 1, 1, 1);
wp_enqueue_script('nice');
wp_register_script('plyr', get_template_directory_uri() . 'assets/js/plugins/plyr.min.js', array(), 1, 1, 1);
wp_enqueue_script('plyr');
wp_register_script('perfect', get_template_directory_uri() . 'assets/js/plugins/perfect-scrollbar.min.js', array(), 1, 1, 1);
wp_enqueue_script('perfect');
wp_register_script('lightgallery', get_template_directory_uri() . 'assets/js/plugins/lightgallery-all.min.js', array(), 1, 1, 1);
wp_enqueue_script('lightgallery');
wp_register_script('imageloaded', get_template_directory_uri() . 'assets/js/plugins/imagesloaded.pkgd.min.js', array(), 1, 1, 1);
wp_enqueue_script('lightgallery');
wp_register_script('isotope', get_template_directory_uri() . 'assets/js/plugins/isotope.pkgd.min.js', array(), 1, 1, 1);
wp_enqueue_script('isotope');
wp_register_script('main', get_template_directory_uri() . 'assets/js/main.js', array(), 1, 1, 1);
wp_enqueue_script('main');
}
这是滚动条的HTML
<div class="frnd-search-inner custom-scroll">
<ul>
<li class="d-flex align-items-center profile-active">
<!-- profile picture end -->
<div class="profile-thumb active">
<a href="#">
<figure class="profile-thumb-small">
<img src="<?php bloginfo('template_directory');?>/assets/images/profile/profile-small-1.jpg" alt="profile picture">
</figure>
</a>
</div>
<!-- profile picture end -->
<div class="posted-author">
<h6 class="author">Jon Wilime</h6>
<p>Many desktop publishing</p>
</div>
</li>
<li class="d-flex align-items-center profile-active">
<!-- profile picture end -->
<div class="profile-thumb active">
<a href="#">
<figure class="profile-thumb-small">
<img src="<?php bloginfo('template_directory');?>/assets/images/profile/profile-small-2.jpg" alt="profile picture">
</figure>
</a>
</div>
<!-- profile picture end -->
<div class="posted-author">
<h6 class="author"><a href="profile.html">Jon Wileyam</a></h6>
<button class="add-frnd">add friend</button>
</div>
</li>
<li class="d-flex align-items-center profile-active">
<!-- profile picture end -->
<div class="profile-thumb active">
<a href="#">
<figure class="profile-thumb-small">
<img src="<?php bloginfo('template_directory');?>/assets/images/profile/profile-small-3.jpg" alt="profile picture">
</figure>
</a>
</div>
<!-- profile picture end -->
<div class="posted-author">
<h6 class="author"><a href="profile.html">Mili Raoulin</a></h6>
<button class="add-frnd">add friend</button>
</div>
</li>
<li class="d-flex align-items-center profile-active">
<!-- profile picture end -->
<div class="profile-thumb active">
<a href="#">
<figure class="profile-thumb-small">
<img src="<?php bloginfo('template_directory');?>/assets/images/profile/profile-small-4.jpg" alt="profile picture">
</figure>
</a>
</div>
<!-- profile picture end -->
<div class="posted-author">
<h6 class="author"><a href="profile.html">Jon Wilime</a></h6>
<button class="add-frnd">10 mutual friends</button>
</div>
</li>
<li class="d-flex align-items-center profile-active">
<!-- profile picture end -->
<div class="profile-thumb active">
<a href="#">
<figure class="profile-thumb-small">
<img src="<?php bloginfo('template_directory');?>/assets/images/profile/profile-small-5.jpg" alt="profile picture">
</figure>
</a>
</div>
<!-- profile picture end -->
<div class="posted-author">
<h6 class="author"><a href="profile.html">Robart faul</a></h6>
<button class="add-frnd">12 mutual friends</button>
</div>
</li>
<li class="d-flex align-items-center profile-active">
<!-- profile picture end -->
<div class="profile-thumb active">
<a href="#">
<figure class="profile-thumb-small">
<img src="<?php bloginfo('template_directory');?>/assets/images/profile/profile-small-3.jpg" alt="profile picture">
</figure>
</a>
</div>
<!-- profile picture end -->
<div class="posted-author">
<h6 class="author"><a href="profile.html">Mili Raoulin</a></h6>
<button class="add-frnd">add friend</button>
</div>
</li>
<li class="d-flex align-items-center profile-active">
<!-- profile picture end -->
<div class="profile-thumb active">
<a href="#">
<figure class="profile-thumb-small">
<img src="<?php bloginfo('template_directory');?>/assets/images/profile/profile-small-4.jpg" alt="profile picture">
</figure>
</a>
</div>
<!-- profile picture end -->
<div class="posted-author">
<h6 class="author"><a href="profile.html">Jon Wilime</a></h6>
<button class="add-frnd">10 mutual friends</button>
</div>
</li>
<li class="d-flex align-items-center profile-active">
<!-- profile picture end -->
<div class="profile-thumb active">
<a href="#">
<figure class="profile-thumb-small">
<img src="<?php bloginfo('template_directory');?>/assets/images/profile/profile-small-5.jpg" alt="profile picture">
</figure>
</a>
</div>
<!-- profile picture end -->
<div class="posted-author">
<h6 class="author"><a href="profile.html">Robart faul</a></h6>
<button class="add-frnd">12 mutual friends</button>
</div>
</li>
</ul>
</div>
</div>
</div>
滚动条的CSS
/*Custom Scroll (Perfect Scroll)*/
.custom-scroll {
position: relative;
overflow: hidden;
}
.custom-scroll.ps .ps__rail-y,
.custom-scroll.ps .ps__rail-x {
background-color: transparent;
}
.custom-scroll.ps .ps__rail-y [class*="ps__thumb"],
.custom-scroll.ps .ps__rail-x [class*="ps__thumb"] {
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.custom-scroll.ps .ps__rail-y {
width: 3px;
right: 2px;
}
.custom-scroll.ps .ps__rail-y .ps__thumb-y {
width: 100%;
right: 0;
}
.custom-scroll.ps .ps__rail-x {
height: 6px;
bottom: 3px;
}
.custom-scroll.ps .ps__rail-x .ps__thumb-x {
height: 100%;
}
.slick-arrow-style button.slick-arrow {
top: 50%;
left: 0;
color: #333333;
font-size: 30px;
cursor: pointer;
display: block;
line-height: 1;
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
.slick-arrow-style button.slick-arrow.slick-next {
left: auto;
right: 0;
}
.slick-arrow-style button.slick-arrow:hover {
color: #dc4734;
}
.slick-track {
line-height: 1;
}
.slick-row-3 .slick-list {
margin: 0 -3px;
}
.slick-row-3 .slick-list .slick-slide {
margin: 0 3px;
}
.slick-row-4 .slick-list {
margin: 0 -4px;
}
.slick-row-4 .slick-list .slick-slide {
margin: 0 4px;
}
.slick-row-5 .slick-list {
margin: 0 -5px;
}
.slick-row-5 .slick-list .slick-slide {
margin: 0 5px;
}
.slick-row-6 .slick-list {
margin: 0 -6px;
}
.slick-row-6 .slick-list .slick-slide {
margin: 0 6px;
}
.slick-row-7 .slick-list {
margin: 0 -7px;
}
.slick-row-7 .slick-list .slick-slide {
margin: 0 7px;
}
.slick-row-8 .slick-list {
margin: 0 -8px;
}
.slick-row-8 .slick-list .slick-slide {
margin: 0 8px;
}
.slick-row-9 .slick-list {
margin: 0 -9px;
}
.slick-row-9 .slick-list .slick-slide {
margin: 0 9px;
}
.slick-row-10 .slick-list {
margin: 0 -10px;
}
.slick-row-10 .slick-list .slick-slide {
margin: 0 10px;
}
.slick-row-11 .slick-list {
margin: 0 -11px;
}
.slick-row-11 .slick-list .slick-slide {
margin: 0 11px;
}
.slick-row-12 .slick-list {
margin: 0 -12px;
}
.slick-row-12 .slick-list .slick-slide {
margin: 0 12px;
}
.slick-row-13 .slick-list {
margin: 0 -13px;
}
.slick-row-13 .slick-list .slick-slide {
margin: 0 13px;
}
.slick-row-14 .slick-list {
margin: 0 -14px;
}
.slick-row-14 .slick-list .slick-slide {
margin: 0 14px;
}
.slick-row-15 .slick-list {
margin: 0 -15px;
}
.slick-row-15 .slick-list .slick-slide {
margin: 0 15px;
}
.slick-row-16 .slick-list {
margin: 0 -16px;
}
.slick-row-16 .slick-list .slick-slide {
margin: 0 16px;
}
.slick-row-17 .slick-list {
margin: 0 -17px;
}
.slick-row-17 .slick-list .slick-slide {
margin: 0 17px;
}
.slick-row-18 .slick-list {
margin: 0 -18px;
}
.slick-row-18 .slick-list .slick-slide {
margin: 0 18px;
}
.slick-row-19 .slick-list {
margin: 0 -19px;
}
.slick-row-19 .slick-list .slick-slide {
margin: 0 19px;
}
.slick-row-20 .slick-list {
margin: 0 -20px;
}
.slick-row-20 .slick-list .slick-slide {
margin: 0 20px;
}
/*------- friend search box start -------*/
.friends-search {
width: 100%;
}
.frnd-search-title {
height: 62px;
padding: 0 25px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
background-color: #dc4734;
}
.frnd-search-title .frnd-search-icon,
.frnd-search-title .close-btn {
color: #fff;
font-size: 20px;
}
.frnd-search-title .frnd-search-icon:hover,
.frnd-search-title .close-btn:hover {
color: #333333;
}
.frnd-search-title p {
color: #fff;
font-size: 18px;
font-weight: 500;
line-height: 1;
margin-bottom: 0;
text-transform: capitalize;
}
.search-box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.search-field {
width: 100%;
border: none;
padding-right: 10px;
color: #666666;
}
.search-btn {
color: #333333;
font-size: 20px;
}
.search-btn:hover {
color: #dc4734;
}
.friend-search-list {
bottom: calc(100% + 10px);
left: 0;
width: 100%;
background-color: #fff;
position: absolute;
opacity: 0;
visibility: hidden;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: bottom;
-ms-transform-origin: bottom;
transform-origin: bottom;
}
.friend-search-list.show {
opacity: 1;
visibility: visible;
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
.friend-search-list ul li {
margin-bottom: 20px;
}
.friend-search-list ul li:last-child {
margin-bottom: 0;
}
.friend-search-list ul li .add-frnd {
display: block;
font-size: 12px;
padding-top: 5px;
color: #666666;
text-transform: capitalize;
}
.friend-search-list ul li .add-frnd:hover {
color: #dc4734;
}
.frnd-search-inner {
height: 350px;
margin: 25px 0;
padding: 0 25px;
}
.frnd-search-inner ul li {
cursor: pointer;
}
.frnd-search-inner ul li .posted-author p {
color: #666666;
font-size: 13px;
padding-top: 5px;
}
/*------- friend search box end -------*/
答案 0 :(得分：0)
尝试将以下内容添加到CSS中。
li {
display: inline-block;
}
您似乎正在使用项目符号列表。通常，默认情况下，列表中的项目或
https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal