Html 列表表总大小与最大元素大小不相同

我用html/css做了一个表格，用ul标签和li代替表格。我想在下表中添加部分，而不必硬编码它们的位置。通常，外部元素与其子内容的所有空间一样大。在这种情况下，极限ul元素仅与第一级子级一样大。我怎样才能使它和它的所有子内容一样大，并且仍然有列表元素（表列）的大小？下面的代码被简化以显示具体的问题

<style>
li {
  height: 30px;
  width : 200px;
}
</style>

<ul>
  <li>
    <p>Values</p>
    <ul>
      <li>Data</li>
      <li>Data</li>
      <li>Data</li>
    </ul>
  </li>
</ul>

<input type="submit" value="Save" />

李{
高度：30px；
宽度：200px；
}


价值观


资料
资料
资料

尝试添加此css：

ul {display:table;}
p, li {display:table-cell;}

---

你为什么不首先使用

表格

？