Расположить элемент HTML в круг с помощью CSS и JQuery

Question

У меня есть набор из 7 jQuery UI кнопок .Точно говоря, Buttonset.

Я хочу расположить все кнопки по кругу.Как я могу расположить их таким образом с помощью CSS (CSS3 вне игры - ищите кросс-браузерное решение) и jQuery?

Я видел несколько плагинов:

1) Roundrr

2) jsshapelib

и несколько демонстраций здесь

<div class="button-wrapper">
    <button id="button-1" class="circle" >1</button>
    <button id="button-2" class="circle" >2</button>
    <button id="button-3" class="circle" >3</button>
    <button id="button-4" class="circle" >4</button>
    <button id="button-5" class="circle" >5</button>
    <button id="button-6" class="circle" >6</button>
    <button id="button-7" class="circle" >7</button>    
</div>

Ищете решение jQuery длярасположите всех детей #button-wrapper в круг по высоте и ширине #button-wrapper.

Answer 1

Вы можете расположить их с помощью position: absolute (и position: relative на центрированной кнопке).С некоторой базовой математикой вы можете вычислить значения top / right / bottom / left.

cos(angle) = right/left value
sin(angle) = top/bottom value

Answer 2

На самом деле это просто математика. Создайте Div с нужным вам размером и со свойством position, установленным на относительное.

Абсолютно расположите центральную кнопку, и либо получите ее размер, либо рассчитайте по центру элемента div и вычислите абсолютное положение остальных кнопок вокруг него относительно их и среднего размера кнопок, чтобы они не перекрывали друг друга или не меньше ты хочешь.