我試圖讓一個水平選單在 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 中查找了該類,但找不到這樣做的方法。我需要用運動創建一個新的類嗎?
uj5u.com熱心網友回復:
您可以通過添加display:inline和float:left到 div 標簽將專輯串列格式化為水平行,如下所示:
<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-right您還可以為您的 div 添加“填充”,這樣它們就不會使用該屬性直接相鄰。
您修改后的代碼:
<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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/479285.html
上一篇:谷歌分析頁面查看網址重復
