How can the width of a font style be independently fixed?

Question

There is a horizontal menu:

<ul>
  <li>Text</li>
  <li>Text 2</li>
</ul>

When the user clicks on one of the li's, its font becomes bold. Therefore, the width of the li element will change slightly. As a result, the menu jumps.

How can I fix it so that it is not affected by the text width?

Answer 1

You can use CSS to prevent the li width from changing, as shown below:

ul li {
   width: 150px;
}

This will prevent jumping