Question

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

每个项目的宽度和高度应相同，“第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;
}

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创建水平框导航

1 个答案: