CODEWITHSUNDEEP
htmlcss
Lajdák Marek
Lajdák Marek

Reputation: 3069

Zooming in browser and element sizes

I have menu like this: jsfiddle. If in your browser start zoomin (Firefox ctrl+roller on mouse) elements will be enlarging. But not disproportionately. In some steps of zoom last menu element (my text 3) jumps to another row...

How ensure some scale ratio? (Without javascript)

EDIT: Now I see in chrome with 100% zoom element (my text 3) is on another row but problem is still the same but reversed - if you will zooming element (my text 3) jumps back to row 1...

HTMl:

<ul>
  <li><a href="#">my text 1</a></li>
  <li><a href="#">my text 2</a></li>
  <li><a href="#">my text 3</a></li>
</ul>

CSS:

ul {
  display: inline-block;
  background-color: blue;
  width: 298px;
  padding: 0;
}

ul li {
  display: block;
  float: left;
  margin-right: 20px;
}

ul li a {
  display: inline-block;
  background-color: red;
  padding: 10px;
}

Upvotes: 0

Views: 186

Answers (1)

hungerstar
hungerstar

Reputation: 21675

This is not a browser zoom feature issue.

You have limited the space in which your floated <li> can be contained. On my browser the text of each <li> takes up approximately 80px. Each <li> is approximately 100px because you added margin to the right side of each one. So, 100px * 3 = 300px and your container is only 298px.

There are multiple solutions to this problem like flexbox, inline-block, etc. but the easiest for you might be to remove the margin from the last <li>.

ul {
  display: inline-block;
  background-color: blue;
  width: 298px;
  padding: 0;
}
ul li {
  display: block;
  float: left;
  margin-right: 20px;
}
ul li:last-child {
  margin: 0;
}
ul li a {
  display: inline-block;
  background-color: red;
  padding: 10px;
}
<ul>
  <li><a href="#">my text 1</a></li>
  <li><a href="#">my text 2</a></li>
  <li><a href="#">my text 3</a></li>
</ul>

But then you end up with extra background blue. To fix this don't set a set width on the <ul> and clear the floated elements within the <ul> so you can still see the background blue.

ul {
  display: inline-block;
  background-color: blue;
  padding: 0;
  overflow: hidden; /* clearfix: clears floats */
}
ul li {
  display: block;
  float: left;
  margin-right: 20px;
}
ul li:last-child {
  margin: 0;
}
ul li a {
  display: inline-block;
  background-color: red;
  padding: 10px;
}
<ul>
  <li><a href="#">my text 1</a></li>
  <li><a href="#">my text 2</a></li>
  <li><a href="#">my text 3</a></li>
</ul>

Upvotes: 1

Related Questions