弹窗在手机端为什么按钮会换行?手机宽度是足够的,如果设置了固定宽度又不会换行了

弹窗在手机端为什么按钮会换行?手机宽度是足够的,如果设置了固定宽度又不会换行了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.shade{
background: rgba(0,0,0,0.3);
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
position: fixed;
}
.pop{
/*width: 70%;*/
position: absolute;
/*display: inline-block;*/
background: #fff;
border-radius: 0.25rem;
padding: 1rem;
text-align: center;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
}
.text{
font-size: 0.75rem;
margin-bottom: 1rem;
}
.btn{
width: 4rem;
height: 1.6rem;
font-size: 0.75rem;
color: #fff;
border-radius: 0.25rem;
border:none;
}
.confirm{
background: blue;
}
.cancle{
background: gray;
}

</style>
</head>
<body>
<div class="shade">
<div class="pop">
<p class="text">确认要删除吗</p>
    <button class="btn confirm">确认</button>
<button class="btn cancle">取消</button>
</div>
</div>
<script src="js/flexible.js"></script>
</body>
</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕星星 2019-09-19 15:36:37

之前说过了哦,每个元素设置的盒模型为border-box:

http://img1.sycdn.imooc.com//climg/5d832ec6099db50502400097.jpg

设置padding值会占据由内容撑起来的宽度,这样内容实际占据的宽度就少了。

原来由内容撑起来的效果为:

http://img1.sycdn.imooc.com//climg/5d832f1509b6da7904060283.jpg

按钮左右两侧挨着父元素边界。现在需要加上padding了,占据宽度的位置:

http://img1.sycdn.imooc.com//climg/5d832fdf09712b0402950218.jpg

橘色框是占据内容撑起来的宽度的位置,所以按钮并排显示宽度就不够了。

自己可以再测试理解下。

好帮手慕星星 2019-09-19 10:12:05

同学你好,

设置固定定位没有设置宽度的元素,宽度是由内容撑起来的。例如:

  • 普通文档流下的div

    http://img1.sycdn.imooc.com//climg/5d82e1aa09dadef319050413.jpg

    宽度占据视口宽度。

  • 设置固定定位的div

    http://img1.sycdn.imooc.com//climg/5d82e1de0954a4b807030442.jpg

    宽度由内容撑起来。

所以在这个练习中,可以先将div中的padding值去掉就可以看到宽度由内容撑起来:

http://img1.sycdn.imooc.com//climg/5d82e2a5098f387c11750502.jpg

而盒子设置的是border-box盒模型,padding值会占据宽度的位置,所以按钮并排的时候宽度不够就会换行显示了:

http://img1.sycdn.imooc.com//climg/5d82e3af09eb5ebb04010221.jpg

你设置宽度可以正常显示是因为宽度够大,除去padding值按钮足够并排显示:

http://img1.sycdn.imooc.com//climg/5d82e3ec090ee67003270178.jpg

自己可以再测试理解下,祝学习愉快!

  • 提问者 技术为王2383098363 #1
    但是加上padding值的宽度也是足够的,页面是750px的,弹窗宽度加起来也就400多点,为什么会宽度不够呢?
    2019-09-19 11:29:25
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师