Guys, you need to make a rubber menu, I know a way when ul is given a table-row and li items are set to a table-cell, but when the screen is narrowed, the distance between the list items changes, is there a way to make a rubber menu with distance preservation? I have no code of my own, because I don’t really know how to do it.

    2 answers 2

    Not only the table can provide a rubber menu.

    * { padding: 0; margin: 0; } ul { text-align: justify; overflow: hidden; height: 20px; margin-top: 100px; } li { display: inline; } li a { display: inline-block; } a:hover { color: #ff0000; } ul:after { content: "1"; margin-left: 100%; display: inline-block; } 
     <ul> <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> 

       <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container"> <div>1</div> <div>1</div> <div>1</div> </div> </nav>

      Connect Bootstrap, and try to add to the container