html, body { width: 100%; height: 100%; margin: 0; padding: 0; float: left; display: flex; justify-content: space-between; } .interfaceState{ position: absolute; width: 25%; height: 10%; } .interfaceState{ display: flex; justify-content: space-between; } .interfaceState>div{ height: 100%; display: flex; } .interfaceState>div>span{ align-self: center; } .interfaceState>div>span:nth-child(1){ color: white; } .interfaceState>.title{ background-image: url(../../img/index/interfaceState.png); background-repeat: no-repeat; background-size: 100% 100%; width: 16%; } #checkBox{ position: fixed; top: 0; left: 88%; width: 11.5%; border-radius: 5%; background-color: #002e37; box-sizing: border-box; padding: 10px 25px; z-index: 1; } #checkBox>li{ display: flex; justify-content: space-around; align-items: center; } #floors{ position: fixed; top: 22%; left: 88%; width: 11.5%; border-radius: 5%; background-color: #002e37; box-sizing: border-box; padding: 10px 25px; z-index: 1; } #floors>li{ display: flex; align-items: center; margin-bottom: 5%; cursor: pointer; } #floors>li:last-child{ margin-bottom: 0; } #floors>li>span:first-child{ padding-right: 8px; } .sizeColor{ color: white; font-size: 0.9em; } input[type="checkbox"] { width: 15px; height: 15px; } ::-webkit-scrollbar { width: 10px; /*对垂直流动条有效*/ height: 10px; /*对水平流动条有效*/ }