使用 MDL 创建横向 box-navigation

Question

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

每个项目的宽度和高度都应相同，"Section 1, 2 etc." 始终位于同一位置 - 靠近左上角，较大标题的长度不应影响框的大小，也不应始终保持相同的 border-right 高度（从上到下展开）。我对这个 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;
}

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

使用 MDL 创建横向 box-navigation

Create horizontal box-navigation with MDL

html

css

material-design

material-design-lite