html5与css图片与字体上下排序
<div class="bottom-menu1" style="z-index: 9999999;height: 50px">
<ul style="margin: 0px auto;padding-left: 2%;padding-left: 2%;height: 100%;margin-top: 50px;
line-height: 0px;">
<li style="width:22%">
<div id="bottom_home">
<img src="https://www.dongjiaju.net/upload/config/2020051104193736136.jpg">
</div>
<span class="ns-text-color">工厂直营价</span>
</li>
<li style="width:24%">
<div id="bottom_home">
<img src="https://www.dongjiaju.net/upload/config/2020051104195718079.jpg">
</div>
<span class="ns-text-color">三年质保</span>
</li>
<li style="width:24%">
<div id="bottom_home">
<img src="https://www.dongjiaju.net/upload/config/2020051104201472526.jpg">
</div>
<span class="ns-text-color">提供3D模型</span>
</li>
<li style="width:30%">
<div id="bottom_home">
<img src="https://www.dongjiaju.net/upload/config/2020051104202866572.jpg">
</div>
<span class="ns-text-color">全屋一站购齐</span>
</li>
</ul>
</div>
.bottom-menu{width: 100%; z-index: 999999999; background: #fff;box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);}
.bottom-menu1 + div{}
.bottom-menu1 ul{overflow: hidden;}
.bottom-menu1 ul li{float: left; text-align: center; width: 25%;}
.bottom-menu1 ul li a{display: block; height: 100%; width: 100%;}
.bottom-menu1 ul li div{padding: 5px 0 0;}
.bottom-menu1 ul li img{width: 24px; height: 24px;}
.bottom-menu1 ul li span{text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; line-height: 20px; font-size: 12px;margin-bottom: 3px;}