javascript - 如何垂直显示一组动态生成的按钮

Question

所以我正在使用 jQuery 循环插件制作一个 jQuery 幻灯片。

部分代码生成了一些<input type="button">带有valuefrom 1to的元素i（其中i等于幻灯片的总数）

我正在尝试设置这些按钮的样式，以便它们出现在幻灯片中的图像顶部。我有那部分还可以。但是它们在图像上水平排列，我想在图像顶部垂直显示它们。

我该怎么做呢？

这是目前我的 CSS 的样子：

input[type=button] {
    position: relative;
    float: center;
    padding: 10px;
    left: 750px;
    z-index: 1000;

}

Answer 1

替换这个

input[type=button] {
    position: relative;
    float: center;
    padding: 10px;
    left: 750px;
    z-index: 1000;
}

进入这个

input[type=button] {
    position: relative;
    padding: 10px;
    left: 750px;
    z-index: 1000;
}

不习惯float: center这是wrong property

过去只float: left和float: right;

更多关于浮动

Answer 2

您可以通过添加display:block到您的输入来实现效果.. http://jsfiddle.net/NqN5y/6/

input[type=button] {
    padding: 10px;
    position: relative;    
    left: 350px;
    z-index: 1000;
    display:block;
}

另一个简单的解决方案是将按钮包含在 div 中。为 div 和 bingo 设置固定宽度。

http://jsfiddle.net/NqN5y/1/

<div id="buttons">
<input type="button" value="1"/>
<input type="button" value="2"/>
<input type="button" value="3"/>
<input type="button" value="4"/>
</div>

input[type=button] {
    position: relative;
    float: center;
    padding: 10px;
    left: 350px;
    z-index: 1000;
}

#buttons{width:50px;}

然后，您可以将您的位置样式移动到容器 div.. http://jsfiddle.net/NqN5y/5/

input[type=button] {
    padding:10px;
}

#buttons{width:50px;background-color:#afa;
    position: relative;
    left: 350px;
    z-index: 1000;
}