@Kurilshik

Равные расстояния между пунктами горизонтального меню?

Всем привет!
Есть меню на списках. Проблема в том, что не получается добиться одинаковых расстояний между пунктами меню. Например пункт "акции" справа вообще прижат к правому краю, и наоробот, у пункта первого слишком большой отступ. Можно как-то изменить, чтобы это автоматически более менее ровно отображалось? Чтобы часть ширины первого пункта (где она избыточна) перешла к тем, у которых отступов практически нет.

popov.ints.net/_kurilshik/perm/test.html

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title>Горизонтальное меню</title>
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<style type="text/css">
#top_menu{width:1180px;margin:0 auto;}
#top_menu_inner, #top_menu_inner li, #top_menu_inner ul{margin: 0;padding: 0;}
#top_menu_inner{position: relative;background-color:#e52a02;display:table;width:100%;}
#top_menu_inner li{display:table-cell;text-align: center;font-weight:700;font-size:13px;font-family:"helveticaneuecyr-bold", Arial, San-seriff;}
#top_menu_inner a{display:block;color:#ffffff;text-decoration:none;text-align:center;padding:14px 0px;}
#top_menu_inner a:hover{background-color:#cc2400;}
#top_menu_inner ul{display:none;position:absolute;z-index:5;border:6px solid #d72600;}
#top_menu_inner li:hover ul{display:block;background-color:#d72600;}
#top_menu_inner ul li{display:block;text-align:left;background-color:#d72600;border-top:0px;}
#top_menu_inner ul li a{text-align:left;font-size:13px;padding:12px 34px;}
#top_menu_inner li:hover a{background-color:#cc2400;}
#top_menu_inner li:hover ul li a{background-color:#d72600;}
#top_menu_inner li:hover ul li:hover a{background-color:#ffffff;color:#d72600;}
</style>
</head>
<body>
<div id="top_menu">
	<ul id="top_menu_inner">
        <li>
        	<a href="#">ИНТЕРНЕТ ДЛЯ ДОМА</a>
    		<!--Modal parent menu may be disabled in the admin panel-->
            <ul>
            	<li><a href="#">Тарифы на подключение</a></li>
            	<li><a href="#">Наши технологии</a></li>
			</ul>                
			<!--//end parent menu-->
        </li>
        <li><a href="#">ИНТЕРНЕТ ДЛЯ БИЗНЕСА</a></li>
        <li><a href="#">ТЕЛЕВИДЕНИЕ</a></li>
        <li><a href="#">КАРТА ПОКРЫТИЯ</a></li>
        <li><a href="#">ОБОРУДОВАНИЕ</a></li>
        <li><a href="#">АКЦИИ</a></li>
    </ul>
    <div class="cb"></div>
</div>
</body>
</html>
  • Вопрос задан
  • 5030 просмотров
Решения вопроса 1
@DENCREAT
Senior Frontend Developer
ul {
display:flex;
flex-direction: row;
justify-content: space-between;
}
ul li {
width:auto;
display: inline-block;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы