css - 为什么填充会破坏响应逻辑?
问题描述
html {
padding: 0;
margin: 0;
background-color: red;
}
body {
padding: 1em;
width: 50em;
background-color: azure;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 50em) {
body {
width: 100%;
}
}
ul {
padding: 0;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
ul>li {
/* flex-basis: 25%; */
min-width: 25%;
margin: 1em;
list-style: none;
background-color: greenyellow;
justify-content: center;
}
ul>li>a {
margin: 0 auto;
padding: 0;
display: block;
background-color: lightgrey;
width: 10em;
height: 10em;
}
<html>
<body>
<ul>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">6</a>
</li>
</ul>
</body>
</html>
对不起,如果我的例子不是最小的,但我不知道问题是否准确。我的目标是有一个简单的响应页面:
- 如果我的屏幕宽度 > 50em,则正文限制为 50 em。
- 否则它会占用所有宽度(100%)。
在这个正文中,我希望有 6 个 flex 元素,这样每行的元素不能超过 3 个。具体来说,这意味着唯一有效的模式是 3x2、2x3、1x6。
一切都是正确的,只要我没有在正文中添加填充。一旦我添加了填充,flex 就会使页面宽度超过屏幕大小。
这是为什么?我怎样才能简单地实现我想要的?
解决方案
只需添加box-sizing: border-box
到所有元素,这将在所有宽度/高度计算中包含填充(和边框),而不是添加它。(因此不会像您那样破坏计算)
* {
box-sizing: border-box;
}
推荐阅读
- python - 有没有办法在 Python 中设置变量方法?
- java - 构建步骤“执行 Windows 批处理命令”将构建标记为失败
- python - 拆分列表 (?)
- c++ - 如何知道使用 EnumChildWindows() 搜索哪个 className?
- postgresql - Kubernetes 上的 Postgres 数据库偶尔会变慢
- html - 如何在不晃动 DIV 的情况下晃动 DIV 标签的内部文本
- wordpress - 如何在functions.php中为自定义帖子类型排入不同的脚本和样式
- python - 有没有办法以相同的顺序洗牌多数据加载器?
- mysql - 将三个 SQL 查询合二为一,根据给定的表顺序查找数据
- angular - 自定义根模块路由问题