【CSS布局之】京东浮动布局，利用宽度的auto来解决兼容性问题

总盒子宽度为1190,如果要浮动排布5个盒子，间距为10px，宽度为230px

直接上代码

<div class="container">
   <!-- 添加一层box，利用width:auto设置ul的父元素宽度为1200 -->
   <div class="box">
     <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
     </ul>
   </div>
 </div>

* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}
.container {
  width: 1190px;
  height: 322px;
  background-color: purple;
  margin: 100px auto;
}
.container .box {
  /* 设置margin-right为-10,整体宽度为
  父元素的宽度（1190） = box的宽度 + margin-left（0） + margin-right（-10）
  所以box的宽度为1200
  */
  margin-right: -10px;
}
.container .box ul li {
  float: left;
  width: 230px;
  height: 322px;
  background-color: pink;
  margin-right: 10px;
}