当我缩小屏幕尺寸时，按钮和选择选项就会根据片段重叠。在按钮和选择选项之间应该有一个英寸间隙（当屏幕最大化时会出现此输出）。有人可以帮忙吗，我应该为输出添加其他内容吗？发布下面的 html 和 css 代码：CSS： body { margin: 0; padding: 0; background: #262626; } h3 { text-align: right; color: #C0C0C0; padding-top: 10px; } .box { position: absolute; top:40%; left: 60%; transform: translate(-50%, -50%); } .box1 { position: absolute; top: 50%; left: 60%; transform: translate(-50%, -50%); } .box2 { position: absolute; top: 60%; left: 60%; transform: translate(-50%, -50%); } .box select { background: #a9a9a9; color: #fff; padding: 10px; width: 250px; height: 35px; border: none; font-size: 15px; box-shadow: 0 5px 25px rgba(0,0,0,.5); -webkit-appearance: border; outline: none; } .box1 select { background: #a9a9a9; color: #fff; padding: 10px; width: 250px; height: 35px; border: none; font-size: 15px; box-shadow: 0 5px 25px rgba(0,0,0,.5); -webkit-appearance: border; outline: none; } .box2 select { background: #a9a9a9; color: #fff; padding: 10px; width: 250px; height: 35px; border: none; font-size: 15px; box-shadow: 0 5px 25px rgba(0,0,0,.5); -webkit-appearance: border; outline: none; } .ssystem { position: absolute; top:40%; left: 41%; transform: translate(-50%, -50%); background: #a9a9a9; color: #fff; padding: 10px; width: 250px; height: 35px; border: none; font-size: 15px; box-shadow: 0 5px 25px rgba(0,0,0,.5); -webkit-appearance: border; outline: none; }
1 回答
神不在的星期二
TA贡献1963条经验 获得超6个赞
现在没有按钮与选择字段一起使用，并且每个元素都独立于其他同级元素单独定位。在这种情况下，同级元素是每个按钮和您在其中找到选择字段的 div。
您可以将右侧按钮与右侧选择字段放在一起，这意味着您可以用 div 包裹它们并应用display: flex，以便它们彼此相邻。对于间距，您可以添加边距或填充。
- 1 回答
- 0 关注
- 43 浏览
添加回答
举报
0/150
提交
取消