Html 使用MDL创建水平框导航

我正在尝试用MDL创建一种水平导航，其中每个导航项就像一个小盒子，有一个小标题和一个大标题。我还没有找到一些预先制作的组件，所以我正在尝试利用ul>li结构

每个项目应具有相同的宽度和高度，“第1节、第2节等”始终位于同一位置-靠近左上角，较大标题的长度不应影响方框的大小，也不应影响边框的右高，边框的右高应始终相同（从上到下展开）。我对MDL这个东西很陌生，所以如果有人能帮我一点忙，我将不胜感激

这是一支钢笔：

---

您可以通过设置

display:flex至
。区段导航列表

.section-nav-list {
   display: flex; // Added
   background-color: white;
   padding-left: 0; // Added
}

然后，移除
li的宽度
并设置
flex:1

.section-nav-list-item {
  flex: 1 // Added
  /* width: 230px; */ // Removed
  display: inline-block;
  padding: 10px 25px;
}

.section-nav-list-item {
  flex: 1 // Added
  /* width: 230px; */ // Removed
  display: inline-block;
  padding: 10px 25px;
}