I have several li , whose display: inline-block is a menu.

The fact is that the active menu items

  • adds a border to the 2px li block;
  • makes the font inside li bold.

So, when the text is made bold, the width li increases, then all the adjacent blocks on the right begin to jump (when the menu items of the active menu change!).

How to get rid of it (do not increase the width of li while increasing inside its text)?

Update

 <ul class="type"> <li class="active"><a href="">Все</a> </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> 
 li display inline-block padding 7px 12px; margin-right 15px //add &.active border 2px solid #fdb913 //МАГАЗИНЫ border-radius 20px a border none font-weight bold color #b6b2a1 a font-size 18px display inline-block color textBlue border-bottom 1px solid #c1ddf1

7 answers 7

 ul { list-style-marker: none; padding: 0; } li { display: inline-block; } li + li { margin-left: 1em; } a { display: block; position: relative; text-align: center; } a:before, a:after { content: attr(aria-label); text-decoration: inherit; } a:before { font-weight: bold; visibility: hidden; } a:after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } a:hover:before { visibility: visible; } a:hover:after { display: none; } 
 <ul> <li> <a href="" aria-label="Все"></a> </li><li> <a href="" aria-label="Обувь"></a> </li><li> <a href="" aria-label="Аксесуары"></a> </li><li> <a href="" aria-label="Детские магазины"></a> </li><li> <a href="" aria-label="Подарки"></a> </li><li> <a href="" aria-label="Прочее"></a> </li> </ul>

    You can not increase the font, but only to pretend that it has increased.

     li a transition: text-shadow 200ms &.active a text-shadow: 0 0 .45px #333, 0 0 .45px #333;

    And you can set li size, and change the font a inside

     li width: 60px // ставь сколько тебе нужно box-sizing: border-box &.active a font-weight: bold // если слово не становиться длиннее чем 60px, то никаких гличей не будет 
       li max-width: 100px; /* Ограничьте li по ширине, чтобы не вылазил жирный шрифт */ box-sizing: border-box; /* Для того, чтобы появление бордера не влияло на ширину блока */

        There is an option to set the margin value when active ... you just need to know the amount by which the font shifts li ... Something like:

         li:active { margin: 0 -2px; }

        Then pick a margin - and wow.

        • Brrrrrrrrrrrrrrrrr - Qwertiy ♦
         li:active { margin: 0 -2px; }
        • 2
          Does this solve the problem? - AivanF.
        • Please try to leave a little more detailed answers. You can add an answer by clicking edit - aleksandr barakin

        When hovering, you can display a hidden tag with the desired design with position: absolute, and hide the old design (for example, visibility: hidden). The truth for this will have to change the html file

         <ul class="type"> <li class="active"> <a href=""><span class="normal">Все</span><span class="bold">Все</span></a> </li> <li> <a href=""><span class="normal">Обувь</span><span class="bold">Обувь</span></a> </li> ... </ul> 
           a:hover { text-shadow: 1px,0,0,color; }
          • Please try to leave a little more detailed answers. - aleksandr barakin