Помогите с меню

Общее
1

Как сделать что бы на одну строку приходилось 4 пункта меню?

2

Объясните, пожалуйста, что конкретно вы имеете в виду.

3

есть меню: http://www.floomby.ru/s2/EgpJw2
Мне нужно на одну строку по 4 квадрата!
Вот код:
/*======== CONTENT =========*/ body.jsn-homepage #jsn-pos-content-top, body.jsn-homepage #jsn-pos-content-top .jsn-modulecontainer { background: none; text-align: center; } body.jsn-homepage #jsn-pos-content-top div.jsn-modulecontent { padding: 0; text-align: center; } body.jsn-homepage #jsn-content-top #jsn-pos-content-top div.jsn-modulecontainer div.jsn-modulecontainer_inner { text-align: center; margin: 0 10px 0 0; } body.jsn-homepage #jsn-content-top #jsn-pos-content-top div.jsn-modulecontainer:first-child + div + div + div div.jsn-modulecontainer_inner { margin-right: 0; } body.jsn-homepage #jsn-content-top div.jsn-modulecontainer div.jsn-modulecontainer_inner div div p a { height:140px; display:block; text-align:center; position:inherit; } body.jsn-homepage #jsn-content-top div.jsn-modulecontainer div.jsn-modulecontainer_inner div div p a img { display:inline-block; margin:20px 0; } body.jsn-homepage #jsn-content-top div.jsn-modulecontainer div.jsn-modulecontainer_inner div div p span { display:block; text-align:left; position:absolute; bottom:25px; padding: 0 15px; float:left; color:#FFF; font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; font-size:16px; font-weight:300; } body.jsn-homepage #jsn-content-top div.jsn-modulecontainer div.jsn-modulecontainer_inner #content-user:hover { background:#1e63a2; border:1px solid #2b85d7; } body.jsn-homepage #jsn-content-top div.jsn-modulecontainer div.jsn-modulecontainer_inner #content-weather:hover { background:#5ba21e; border:1px solid #8bc405; } body.jsn-homepage #jsn-content-top div.jsn-modulecontainer div.jsn-modulecontainer_inner #content-setting:hover { background:#e89e00; border:1px solid #ffc600; } body.jsn-homepage #jsn-content-top div.jsn-modulecontainer div.jsn-modulecontainer_inner #content-support:hover { background:#0096a9; border:1px solid #00b5cc; } body.jsn-homepage #jsn-content-top div.jsn-modulecontainer div.jsn-modulecontainer_inner:hover img { margin: 20px 0 20px -30px; } body.jsn-homepage #jsn-content-top div.jsn-modulecontainer div.jsn-modulecontainer_inner:hover span { padding-left:35px }

4

HTML-код предоставьте тоже, если не трудно.

6 
<div id="jsn-content-top" class="jsn-modulescontainer jsn-horizontallayout jsn-modulescontainer6">
						<div id="jsn-pos-content-top">
							<div class="jsn-icon-help jsn-modulecontainer"><div class="jsn-modulecontainer_inner"><div class="jsn-modulecontent">
<div>
	<p><a id="content-weather" href="index.php?option=com_community&amp;view=search&amp;task=browse&amp;Itemid=1098"> <img src="images/photos/icons.png" alt=""> <span>Клининговые услуги</span> </a></p></div><div class="clearbreak"></div></div></div></div><div class="jsn-icon-help jsn-modulecontainer"><div class="jsn-modulecontainer_inner"><div class="jsn-modulecontent">
<div>
	<p><a id="content-setting" href="index.php?option=com_community&amp;view=videos&amp;Itemid=1097"> <img src="images/photos/rbt.png" alt=""></a> <strong><span>Ремонт быт.техники</span></strong></p></div><div class="clearbreak"></div></div></div></div><div class="jsn-icon-display jsn-modulecontainer"><div class="jsn-modulecontainer_inner"><div class="jsn-modulecontent">
<div>
	<p><a id="content-user" href="index.php?option=com_community&amp;view=photos&amp;Itemid=1096"><img src="images/photos/wan.png"></a><strong><span>Рестоврация ванн</span></strong></p></div><div class="clearbreak"></div></div></div></div><div class="jsn-icon-display jsn-modulecontainer"><div class="jsn-modulecontainer_inner"><div class="jsn-modulecontent">
<div>
	<p><a id="content-support" href="index.php?option=com_community&amp;view=photos&amp;Itemid=1096"><img src="images/photos/avto.png"></a><strong><span>Прокат автомобилей</span></strong></p></div><div class="clearbreak"></div></div></div></div><div class="jsn-icon-display jsn-modulecontainer"><div class="jsn-modulecontainer_inner"><div class="jsn-modulecontent">
<div>
	<p><a id="content-weather" href="index.php?option=com_community&amp;view=search&amp;task=browse&amp;Itemid=1098"> <img src="images/photos/pbt.png" alt=""> <span>Подключение бытовой техники</span> </a></p></div><div class="clearbreak"></div></div></div></div><div class="jsn-icon-help jsn-modulecontainer"><div class="jsn-modulecontainer_inner"><div class="jsn-modulecontent">
<div>
	<p><a id="content-user" href="index.php?option=com_community&amp;view=search&amp;task=browse&amp;Itemid=1098"> <img src="images/photos/pot.png" alt=""> <span>Натяжные потолки</span> </a></p></div><div class="clearbreak"></div></div></div></div>
							<div class="clearbreak"></div>
						</div>
					</div>
7

Разрешите вопрос…
Вы это всё сами писали?..
Просто такие селекторы гигантские.
Меню лучше делать с помощью списка.

8

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

9

Наверное, проще сделать через flexbox. Знаете?

10

нет не знаком

12

спасибо за помощь.

13

Примеры:
http://codepen.io/IneSSka/pen/yedBLX
http://codepen.io/IneSSka/pen/pgXzXZ
Другие мнения и образцы только приветствуются.

1 лайк