对齐图像幻灯片按钮HTML5
Aligning Image Slideshow button HTML5
所以我有麻烦安排我的图像相邻水平排列。它们实际上是幻灯片,我把它们修改成按钮。我使用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;
}
我不确定这是否是由于我的列表安排。
有人能解释一下为什么我的图像没有按照我想要的方式对齐吗?
似乎没有问题。你的代码可以工作。我在下面做了一些轻微的调整来演示它的工作。您是否在使用特定的浏览器时遇到问题?
http://jsfiddle.net/rkT2k/<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;
}
相关文章:
- 在HTML5画布上添加按钮和控件
- HTML5历史记录-返回上一个完整页面按钮
- 在 html5 中使用暂停和播放按钮
- 自定义HTML5视频控件-退出按钮不会启动全屏切换功能
- 如何使用html5制作播放按钮
- HTML5画布创建“清除画布”按钮的正确方法
- 吸引人 - html5 导出添加了带有播放按钮的第一张幻灯片
- 通用 jQuery,用于在 HTML5 验证后禁用所有表单上的提交按钮
- HTML5数据库保存了详细信息以及一个按钮
- HTML5视频播放/停止按钮与Javascript
- 电子邮件和手机号码验证在同一html5文本框与按钮
- HTML5 Javascript播放/暂停按钮
- 当我使用html5画布单击按钮时,要更改矩形的位置
- 关闭HTML5视频中的音量控制和静音按钮
- 如何禁用安卓后退按钮点击在html5网络应用程序
- 如何在windows 8 html5 metro应用程序中显示图像及其下的2个按钮
- HTML5历史禁用转发按钮
- JavaScript 启用新的 HTML5 按钮属性:formaction、formmethod
- 如何使用html5按钮打开本地应用程序或文件
- HTML5按钮.formaction属性在