极客观点
项目管理
HarmonyOS
我在对着视频学习一个简单的效果，却发现了很神奇的现象，有时候元素自动就换行了，效果
链接：
代码和效果
如图所示:
这四个type为checkbox的input排成一行，是我想要的效果。可是假如缩小屏幕大小的话，就会变成这样：
我的疑问是，这四个input外面各包裹了一个label标签，可是我只是给label标签设置宽度为110px，这个值并不大，为什么在某些明显可以排成一行的情况下却换行了？
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
h1{
margin-bottom: 40px;
font-family: sans-serif;
}
.switch{
position: relative;
display: inline-block;
width: 110px;
height: 60px;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Toggle Switch</h1>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
</div>
</body>
</html>
transform: translate(-50%,-50%);是相对于当前位置偏移，对正常文档流没有影响，先把它去掉。此时
top: 50%; left: 50%;其实是定义了.container容器的左上角的位置，即窗口变化时左上角永远居中所以
.container容器只能渲染在浏览器窗口的右半边，当整个窗口的右半边比.container容器小的时候，就会出现换行的情况加上
transform: translate(-50%,-50%);后不改变正常文档流（元素本身所占的位置会保留），同理，当窗口宽度小于.container容器的2倍时，就会换行