<ul class="nav"> <li><a href="">Пункт 1</a></li> <li><a href="">Длинный пункт 2</a></li> <li><a href="">Еще длиннее пункт 3</a></li> <li><a href="">4</a></li></ul> <ul class="nav nav_v2"><li><a href="">Пункт 1</a></li> <li><a href="">Длинный пункт 2</a></li> <li><a href="">Еще длиннее пункт 3</a></li> <li><a href="">4</a></li></ul>
ul.nav { text-align: justify; border: 1px solid red; width: 500px; padding: 0; margin: 0; height:31px; } ul.nav.nav_v2 { margin-top: 20px; width: 440px; height:62px; } ul.nav li { display: inline-block; position: relative; border: 1px solid green; margin: 0; padding: 5px; background: gray; } ul.nav li a { color: #fff; text-decoration: none; } ul.nav:before{ content: ''; display: block; width: 100%; height: 0; } ul.nav:after { width: 100%; height: 0; visibility: hidden; overflow: hidden; content: ''; display: inline-block; }