html div横向排列

版权声明：转载请注明出处~ https://blog.csdn.net/seven_north/article/details/88226210

以aui框架布局为例：

css代码如下：

.aui-row{
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
  }
  .aui-card-list{
    display: inline-block;
    box-sizing: border-box;
    width: 150px;
    margin-bottom: 0;
  }

html 代码如下：

<div class="aui-row aui-row-padded">
    <div class="aui-card-list">
         <div class="aui-card-list-content-padded">
              <img src="../../../img/goods.png" />
         </div>
	    <div class="aui-card-list-footer aui-border-t">
	         <div><i class="aui-iconfont aui-icon-laud"></i> 888</div>
	         <div><i class="aui-iconfont aui-icon-star"></i> 888</div>
	    </div>
    </div>
    <div class="aui-card-list">
         <div class="aui-card-list-content-padded">
              <img src="../../../img/goods.png" />
         </div>
	    <div class="aui-card-list-footer aui-border-t">
	         <div><i class="aui-iconfont aui-icon-laud"></i> 888</div>
	         <div><i class="aui-iconfont aui-icon-star"></i> 888</div>
	    </div>
    </div>
</div>

以秒杀为例如下代码

css:

.time_list{
    border-bottom: 1px solid #eee;
    clear: both;
    border-radius: .15rem;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
  }
 .time_list ul li{
    width: 20%;
    text-align: center;
    display: inline-block;
    padding: .25rem 0;
  }
 .time_list ul li .tl_time{
    font-size: .9rem;
  }
 .time_list ul li .tl_title{
    font-size: .6rem;
  }
 .time_list .active{
    color: #f6be32;
    font-weight: bold;
    border-bottom: 1px solid;
  }
 .djs{
    line-height: 1.5rem;
    padding:.2rem .5rem;
    font-size: .8rem;
    font-weight: bold;
  }
 .djs span{
    background: #777777;
    color: #fff;
    padding: 0 .1rem;
  }

html：

<div class="time_list">
          <ul>
            <li class="active">
              <p class="tl_time">12:00</p>
              <p class="tl_title">即将开始</p>
            </li>
            <li>
              <p class="tl_time">12:00</p>
              <p class="tl_title">即将开始</p>
            </li>
            <li>
              <p class="tl_time">12:00</p>
              <p class="tl_title">即将开始</p>
            </li>
            <li>
              <p class="tl_time">12:00</p>
              <p class="tl_title">即将开始</p>
            </li>
            <li>
              <p class="tl_time">12:00</p>
              <p class="tl_title">即将开始</p>
            </li>
            <li>
              <p class="tl_time">12:00</p>
              <p class="tl_title">即将开始</p>
            </li>
            <li>
              <p class="tl_time">12:00</p>
              <p class="tl_title">即将开始</p>
            </li>
          </ul>
        </div>

参考链接

---