所以我很难将我的图像排列成水平排列。它们实际上是我修改过的幻灯片,因此它们充当按钮。我使用 easyslider javascript 来执行该功能,不确定 easyslider 是否可能是原因。所以问题是它们垂直向下排列。我尝试将“float : left”添加到 css id 元素并将其附加到图像,但无济于事。
<div id="sliderparent">
<div class="slider">
<ul>
<li>
<a href="#article1"><img class="sliderimg"src="images/example-slide-1.jpg" /></a></li>
<li>
<a href="#article1"><img class="sliderimg"src="images/example-slide-2.jpg" /></a></li>
<li>
<a href="#article1"><img class="sliderimg"src="images/example-slide-3.jpg" /></a></li>
<li>
<a href="#article1"><img class="sliderimg"src="images/example-slide-4.jpg" /></a></li>
</ul>
</div>
这是我的 CSS
#sliderparent {
width: 800px;
align-content:center;
text-align:center;
.slider ul, .slider li{
margin:0;
padding:0;
list-style:none;
position:initial;
}
.slider li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:200px;
height:100px;
overflow:hidden;
float:left;
}
.sliderimg
{
width:200px;
height: auto;
float:left;
}
不知道是不是我的list安排的问题。
有人能解释一下为什么我的图片没有按照我希望的方式对齐吗?
最佳答案
似乎没有问题。您的代码有效。我在下面做了一些细微的调整以证明它有效。您在使用特定浏览器时遇到问题吗?
<div id="sliderparent">
<div class="slider">
<ul>
<li><a href="#article1"><img class="sliderimg"src="images/example-slide-1.jpg" /></a></li>
<li><a href="#article1"><img class="sliderimg"src="images/example-slide-2.jpg" /></a></li>
<li><a href="#article1"><img class="sliderimg"src="images/example-slide-3.jpg" /></a></li>
<li><a href="#article1"><img class="sliderimg"src="images/example-slide-4.jpg" /></a></li>
</ul>
</div>
还有 CSS:
#sliderparent {
width: 800px;
text-align: center;
}
.slider ul,
.slider li {
margin: 0;
padding: 0;
list-style: none;
position: initial;
}
.slider li {
/* define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here */
width: 200px;
height: 100px;
overflow: hidden;
float: left;
}
.sliderimg {
width: 200px;
height: auto;
float: left;
/* make images blocks temporarily */
display: block;
height: 100px;
background: #ccc;
}
关于javascript - 对齐图像幻灯片按钮 HTML5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16514789/