Question

我有这样的菜单：jsfiddle。如果在您的浏览器中启动zoomin（Firefox ctrl +滚动鼠标）元素将放大。但不是不成比例的。在缩放的一些步骤中，最后一个菜单元素（我的文本3）跳转到另一行......

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

编辑：现在我在chrome中看到100％缩放元素（我的文本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>。

这个问题有多种解决方案，如flexbox，inline-block等，但最简单的方法可能是删除上一个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>

{{1}}

缩放浏览器和元素大小

1 个答案: