css overflow-x：滚动ul

Question

我尝试使用ul li创建一个表，但是尽管我尝试了我可以获得x溢出滚动的唯一方法是当我手动设置宽度时，但是这不实用，因为我不喜欢＆＃ 39; t总是知道表中会有多少行。

问题1：  我如何实现＆溢出-x：＆＃39;滚动这个？

问题2：  我应该使用＆＃39; a href＆＃39;或者＆＃39; onclick＆＃39;在ul附近？

＆＃13;

＆＃13;

#Results {
  background-color: #f3f3f3;
  border: 1px dotted #4b545f;
  position: absolute;
  left: 9px;
  top: 114px;
  height: -moz-calc(100% - 230px);
  height: -webkit-calc(100% - 230px);
  height: -o-calc(100% - 230px);
  height: calc(100% - 230px);
  width: -moz-calc(100% - 20px);
  width: -webkit-calc(100% - 20px);
  width: -o-calc(100% - 20px);
  width: calc(100% - 20px);
  overflow-x: scroll;
  overflow-y: hidden;
}
#Header {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 40px;
  overflow-x: visible !important;
  white-space: nowrap;
  display: inline-block;
  width: 100%;
}
#Header > ul {
  width: auto;
  height: 40px;
  line-height: 40px;
  color: #fff;
  border: 1px dotted #4b545f;
  padding: 0 0px;
  list-style: none;
  margin: 0px;
  overflow-x: visible !important;
  overflow-y: hidden !important;
  clip-parent: #ResBody !important;
}
#Header > ul > li {
  float: left;
  padding: 0 10px;
  width: 114px;
  max-width: 114px;
}
#ResBody {
  position: absolute;
  left: 0px;
  top: 40px;
  height: -moz-calc(100% - 40px);
  height: -webkit-calc(100% - 40px);
  height: -o-calc(100% - 40px);
  height: calc(100% - 40px);
  overflow-y: scroll;
  overflow-x: visible;
}
#ResBody > ul {
  display: inline-block;
  color: #fff;
  height: 25px;
  line-height: 25px;
  border-left: 1px dotted #4b545f;
  border-right: 1px dotted #4b545f;
  border-bottom: 1px dotted #4b545f;
  padding: 0 0px;
  list-style: none;
  padding: 0 0px;
  margin: 0px;
  width: auto;
  white-space: nowrap;
  overflow-x: visible !important;
  overflow-y: hidden;
}
#ResBody > ul > a > li {
  display: inline-block;
  list-style: none;
  float: left;
  padding: 0 10px;
  width: 114px;
  max-width: 114px;
  color: #000;
  position: relative;
}
#ResBody > ul:hover > a > li {
  float: left;
  padding: 0 10px;
  width: 114px;
  max-width: 114px;
  color: #000;
  background-color: #0b75b2;
}

＆＃13;

<div id="Results">
  <div id="Header">
    <ul>
      <li><a href="#">aa</a>
      </li>
      <li><a href="#">bb</a>
      </li>
      <li><a href="#">cc</a>
      </li>
      <li><a href="#">dd</a>
      </li>
      <li><a href="#">ee</a>
      </li>
      <li><a href="#">ff</a>
      </li>
      <li><a href="#">gg</a>
      </li>
      <li><a href="#">hh</a>
      </li>
      <li><a href="#">ii</a>
      </li>
      <li><a href="#">jj</a>
      </li>
      <li><a href="#">kk</a>
      </li>
      <li><a href="#">ll</a>
      </li>
      <li><a href="#">mm</a>
      </li>
      <li><a href="#">nn</a>
      </li>
    </ul>
  </div>
  <div id="ResBody">
    <ul>
      <a href="#a#">
        <li><a href="#">aa</a>
        </li>
        <li><a href="#">bb</a>
        </li>
        <li><a href="#">cc</a>
        </li>
        <li><a href="#">dd</a>
        </li>
        <li><a href="#">ee</a>
        </li>
        <li><a href="#">ff</a>
        </li>
        <li><a href="#">gg</a>
        </li>
        <li><a href="#">hh</a>
        </li>
        <li><a href="#">ii</a>
        </li>
        <li><a href="#">jj</a>
        </li>
        <li><a href="#">kk</a>
        </li>
        <li><a href="#">ll</a>
        </li>
        <li><a href="#">mm</a>
        </li>
        <li><a href="#">nn</a>
        </li>
      </a>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;