SOURCE

<div class="father">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>

<pre>
  *{
  padding: 0;
  margin: 0;
}

.father{
  width: 80%;
  border: solid 1px blue;
  overflow: auto;
  margin: 0 auto;
}

ul{
  width: 1100px;
  border: solid 1px red;
  margin: 10px;
}

ul:after{
  content: '';
  display: block;
  clear: both;
}

li{
  width: 98px;
  border:solid 1px #ccc;
  list-style:none;
  float:left;
  text-align: center;
  margin: 5px;
}
</pre>

*{
  padding: 0;
  margin: 0;
}

.father{
  width: 80%;
  border: solid 1px blue;
  overflow: auto;
  margin: 0 auto;
}

ul{
  width: 1100px;
  border: solid 1px red;
  margin: 10px;
}

ul:after{
  content: '';
  display: block;
  clear: both;
}

li{
  width: 98px;
  border:solid 1px #ccc;
  list-style:none;
  float:left;
  text-align: center;
  margin: 5px;
}