html5与css图片与字体上下排序

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;}