放大浏览器和元素大小

Question

我有这样的菜单：jsfiddle。如果在浏览器中开始放大(鼠标上的Firefox ctrl +滚轮(元素将放大。但不成比例。在缩放的某些步骤中，最后一个菜单元素(我的文本 3(跳转到另一行......

如何确保一定的比例？(没有javascript(

编辑：现在我看到在带有 100% 缩放元素的 chrome 中(我的文本 3(在另一行上，但问题仍然相同但相反 - 如果您将缩放元素(我的文本 3(跳回第 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;
}

Answer 1

这不是浏览器缩放功能问题。

您限制了可以容纳浮动<li>的空间。在我的浏览器上，每个<li>的文本大约占用80px。每个<li>大约是100px，因为您在每个的右侧添加了边距。所以，100px * 3 = 300px和你的容器只是 298px .

此问题有多种解决方案，例如弹性框，内联块等，但最简单的方法可能是删除最后一个<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>

但是你最终会得到额外的背景蓝色。要解决此问题，请不要在<ul>上设置设置宽度并清除<ul>中的浮动元素，以便您仍然可以看到背景蓝色。

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>