使用 MDL 创建水平框导航答案

【问题标题】：Create horizontal box-navigation with MDL使用 MDL 创建水平框导航
【发布时间】：2018-09-20 01:14:24
【问题描述】：

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

每个项目应具有相同的宽度和高度，并带有“第 1、2 节等”。总是在同一个地方——靠近左上角，大标题的长度不应该影响盒子的大小，也不应该影响边框的高度，应该总是相同的（从上到下分布）。我对这个 MDL 的东西很陌生，所以如果有人能对此有所帮助，我将不胜感激。

这是一支笔：https://codepen.io/anon/pen/vRbrGp

body {
  background-color: blue;
}

.section-nav {
    background-color: #F7F7F7;
}

.max-width {
    max-width: 1400px;
}

.section-nav-list-item {
    display: inline-block;
    padding: 10px 25px;
    width: 230px;
}

.section-nav-list {
    background-color: white;
}

.section-nav-list-item:not(:last-child) {
    border-right: 1px solid grey;
}

.section-nav-list-item--selected {
    background-color: yellow;
}

【问题讨论】：

标签： html css material-design material-design-lite

【解决方案1】：

您可以通过将display: flex; 设置为.section-nav-list 来实现此目的

.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;
}

【讨论】：