Equal spacing between horizontal menu items?

K

Kurilshik2015-09-01 15:48:01

HTML

Kurilshik, 2015-09-01 15:48:01

Hello!
There are menus on the lists. The problem is that it is not possible to achieve the same distances between menu items. For example, the item "shares" on the right is generally pressed to the right edge, and vice versa, the first item has too much indentation. Can I somehow change it so that it is automatically more or less evenly displayed? So that part of the width of the first paragraph (where it is redundant) goes to those that have practically no indents.
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>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

D

Denis Bochkov, 2015-09-01
@Kurilshik

ul {
display:flex;
flex direction: row;
justify-content: space-between;
}
ul li {
width:auto;
display: inline-block
}