There is the following structure , you need to make sure that all menu items stretch as much as possible, that is, even if there is 1 menu item, it should occupy the whole gray area in this case, does anyone have any ideas how to do this?

    2 answers 2

    You can apply this cheat:

    html:

    <div class="menu"> <ul> <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> </div> <hr> <div class="menu"> <ul> <li><a href="#">я тут один</a></li> </ul> </div>

    css:

     .menu { display: table; width: 400px; } .menu ul { background-color: #ccc; display: table-row; } .menu ul li { display: table-cell; background-color: #3a3; text-align: center; }

    demo - here is another explanation of how it is better than the table (you can use different

     @media screen *-width { }
    • cool. thank. - Jeremen1

    you can use javascript to set the width of the element according to the formula: the width of the area / number of elements