css忽略＆＃34;显示：内联＆＃34;放大

Question

当我缩放时，css忽略＆＃34;显示：内联＆＃34;

problem2 http://screenshu.com/static/uploads/temporary/bc/r3/cf/ae0b2a.jpg

problem3 http://screenshu.com/static/uploads/temporary/91/ll/n6/w2zxbe.jpg

Answer 1

您分配的属性不会被忽略。这是显示的正确行为：内联。发生这种情况的原因是因为在缩放时，父容器相对于其子容器正在缩小，并且子项没有禁止它们断开到新行的约束。为了继续显示而不溢出，其中一个显示在一个新行上。

在我看来，实现你想要做的事情的最佳选择是flex box模块。它是CSS3引入的模块，为这种情况提供了解决方案。如何使用弹性盒模块在这里解释得非常好：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。您需要应用于父容器中的子项的属性是：

flex-wrap: nowrap;

这允许所有项目都显示在一行上。

这当然不是唯一的解决方案。

您还可以将父容器的最小宽度设置为大于或等于其包含的子容器宽度的总和。另一种选择是将子宽度设置为等于其父容器的百分比。可能还有更多的方法，但同样，flex box是针对这种情况设计的，并且不仅为这种特殊情况提供了一个非常干净和清晰的解决方案，而且还提供了过去困扰网页样式的大量显示问题。