我如何减慢这个菜单

Question

我想让一个水平菜单在HTML和CSS中发挥作用。

<section class="latest-albums-area section-padding-100">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-heading style-2">
<p>See what’s new</p>
<h2>Latest Albums</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-9">
<div class="ablums-text text-center mb-70">
<p>Nam tristique ex vel magna tincidunt, ut porta nisl finibus. Vivamus eu dolor eu quam varius rutrum. Fusce nec justo id sem aliquam fringilla nec non lacus. Suspendisse eget lobortis nisi, ac cursus odio. Vivamus nibh velit, rutrum at ipsum ac, dignissim iaculis ante. Donec in velit non elit pulvinar pellentesque et non eros.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="albums-slideshow owl-carousel">
<!-- Single Album -->
<div class="single-album">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a2.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Sam Smith</h5>
</a>
<p>Underground</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a6.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Ustopable</h5>
</a>
<p>Unplugged</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a7.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Beyonce</h5>
</a>
<p>Songs</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

然而，当我在服务器上运行它时，它变成了这样:

<section class="latest-albums-area section-padding-100">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-heading style-2">
<p>See what’s new</p>
<h2>Latest Albums</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-9">
<div class="ablums-text text-center mb-70">
<p>Nam tristique ex vel magna tincidunt, ut porta nisl finibus. Vivamus eu dolor eu quam varius rutrum. Fusce nec justo id sem aliquam fringilla nec non lacus. Suspendisse eget lobortis nisi, ac cursus odio. Vivamus nibh velit, rutrum at ipsum ac, dignissim iaculis ante. Donec in velit non elit pulvinar pellentesque et non eros.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="albums-slideshow owl-carousel owl-loaded owl-drag">
<!-- Single Album -->

<!-- Single Album -->

<!-- Single Album -->

<!-- Single Album -->

<!-- Single Album -->

<!-- Single Album -->

<!-- Single Album -->

<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(-1368px, 0px, 0px); transition: all 0.75s ease 0s; width: 3876px;"><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a6.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Ustopable</h5>
</a>
<p>Unplugged</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a7.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Beyonce</h5>
</a>
<p>Songs</p>
</div>
</div></div><div class="owl-item" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a2.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Sam Smith</h5>
</a>
<p>Underground</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a6.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Ustopable</h5>
</a>
<p>Unplugged</p>
</div>
</div></div><div class="owl-item" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a7.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Beyonce</h5>
</a>
<p>Songs</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a2.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Sam Smith</h5>
</a>
<p>Underground</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div></div></div></div><div class="owl-nav"><div class="owl-prev"><i class="fa fa-angle-double-left"></i></div><div class="owl-next"><i class="fa fa-angle-double-right"></i></div></div><div class="owl-dots disabled"></div></div>
</div>
</div>
</div>
</section>

我如何使菜单慢下来，这样它就不会每15秒移动一次?我在所有的CSS和Javascript中寻找类，但找不到这样做的方法。我需要在运动中创建一个新类吗?

Answer 1

您可以通过在div标签中添加display:inline和float:left来将专辑列表格式化为水平行，如下所示:

<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div>

还可以添加"padding"到你的div，所以他们不是直接相邻彼此使用padding-right属性。

修改后的代码:

<section class="latest-albums-area section-padding-100">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-heading style-2">
<p>See what’s new</p>
<h2>Latest Albums</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-9">
<div class="ablums-text text-center mb-70">
<p>Nam tristique ex vel magna tincidunt, ut porta nisl finibus. Vivamus eu dolor eu quam varius rutrum. Fusce nec justo id sem aliquam fringilla nec non lacus. Suspendisse eget lobortis nisi, ac cursus odio. Vivamus nibh velit, rutrum at ipsum ac, dignissim iaculis ante. Donec in velit non elit pulvinar pellentesque et non eros.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="albums-slideshow owl-carousel">
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a2.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Sam Smith</h5>
</a>
<p>Underground</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a6.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Ustopable</h5>
</a>
<p>Unplugged</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a7.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Beyonce</h5>
</a>
<p>Songs</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>