Question

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

部分代码会生成一些<input type="button">元素，value从1到i（其中i等于幻灯片总数）< / p>

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

我该怎么做呢？

目前我的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;

有关 Float

的更多信息

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和宾果设置一个固定的宽度。

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;
}

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

2 个答案: