Как отображать группу динамически сгенерированных кнопок по вертикали

Question

Итак, я создаю слайд-шоу jQuery, используя плагин цикла jQuery.

часть коды генерирует несколько <input type="button"> элементов с value от 1 до 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;

Подробнее о 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; 
}