Меню из квадратных элементов

[PavelTkachev]

Пытаюсь сверстать меню из квадратных кнопок. Задача в том, чтобы они пропорционально уменьшались при уменьшении экрана и если им не хватает места, то переходили на следующую строку.

 

Вот ссылка на то, что я намудрил

http://jsfiddle.net/RSW45/

 

Однако почему-то меню получается не квадратное, а прямоугольное. И можно ли убрать отступы справа и снизу или нало использовать float:left? Правда во втором случае будет проблема как сделать, чтобы меню было всегда поцентру.

 

 

[mrnobody]

Так примерно? http://jsfiddle.net/mrnobody/RSW45/1/

UPD: http://jsfiddle.net/mrnobody/RSW45/2/

Edited March 20, 2014 by mrnobody

[PavelTkachev]

Спасибо! Сам бы не догодался.

 

А как отступы убрать справа и снизу? Кроме как отрицательный margin.

[mrnobody]

http://jsfiddle.net/mrnobody/RSW45/3/

[PavelTkachev]

Понял. Но теперь получилось, что квадраты по высоте вылезли за пределв зелёной области.

[Sensei]

div {

    padding: 1px;

}

[Sensei]

Как вариант http://jsfiddle.net/RSW45/6/

Имеет свои ограничения, но я бы предпочел их комментариям в коде.

[PavelTkachev]

Какие ограничения и почему предпочли бы такой вариант?

 

Я ищё способ, который будет работать и на мобильных и на планшетах и на настольных компьютерах.

[PavelTkachev]

http://jsfiddle.net/mrnobody/RSW45/3/

 

При уменьшении ширины квадратики перескакивают на вторую строку и налезают на 1 пиксел на квадратики строкой выше. Решил это с помощью добавления

 

span{

    margin:1px;

}

[PavelTkachev]

При уменьшении ширины слева отступ больше, чем справа. Как сделать чтобы было всегда по центру?

 

http://jsfiddle.net/z62JP/

[Great Rash]

При уменьшении ширины слева отступ больше, чем справа. Как сделать чтобы было всегда по центру?

menu {  padding: 0;}

[PavelTkachev]

Спасибо!