Question

我有两个单独的列表（但我打开一个关于如何只有一个的例子）。第一个列表是信息（例如'标题'，'长度''发布日期'），第二个列表是信息的答案（例如'50 Shades of Gray'，'50 minutes'和'2015'）。

这是我想要的输出，正如您所看到的，信息的答案垂直居中于信息的下方：

（注意可能会有更多信息，例如演员阵容，预算等）

我尝试过使用Flex但是这两个列表是分开显示的：

ul {
   white-space:nowrap; 
}

li {
   display: flex;
   justify-content: center;
   flex-direction: column;
   text-align: center;
}

<ul>
<li>Title</li>
<li>Length</li>
<li>Release Date</li>
</ul>
<ul>
<li>50 Shades of Grey</li>
<li>50 minutes</li>
<li>2015</li>
</ul>

Answer 1

您可以使用CSS表格布局。您必须在var props = Object.keys(contracts[i]); for (var j = 0; j < props.length; j++) { // etc. }上设置display: table-row，在ul设置display: table-cell。您还应在li上添加text-align: center。

＆＃13;

li

＆＃13;

ul {
  display: table-row;
}

li {
  display: table-cell;
  text-align: center;
  padding: 10px 20px;
}

＆＃13;

您也可以使用<ul> <li>Title</li> <li>Length</li> <li>Release Date</li> </ul> <ul> <li>50 Shades of Grey</li> <li>50 minutes</li> <li>2015</li> </ul>，只需在每个Flexbox上设置flex: 1。如果您在每个li中拥有相同数量的li，如果不使用表格布局，这将有效。

＆＃13;

ul

＆＃13;

ul {
  display: flex;
  list-style: none;
}

li {
  flex: 1;
  text-align: center;
}

＆＃13;

Answer 2

这是一种方法，使用单个ul和flexbox：

＆＃13;

ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  flex: 1;
  text-align: center;
}

h2, p {
  white-space: nowrap; /* optional */
}

＆＃13;

<ul>
  <li>
    <h2>Title</h2>
    <p>50 Shades of Grey</p>
    <p>another title</p>
    <p>another title</p>
    <p>another title</p>
  </li>
  <li>
    <h2>Length</h2>
    <p>50 minutes</p>
    <p>another length</p>
    <p>another length</p>
    <p>another length</p>
  </li>
  <li>
    <h2>Release Date</h2>
    <p>2015</p>
    <p>another year</p>
    <p>another year</p>
    <p>another year</p>
  </li>
</ul>

＆＃13;

如果你想要去核心语义，你可以将每个li的内容嵌套在另一个列表中，因为它们也是列表。

Answer 3

假设你希望每一行都对齐，即使其中一个项目中的内容更高，你需要有一个（在这种情况下）ul，然后调整项目的大小，使它们包裹每个，在这种情况下，每3个。

为了确保每个项目的宽度相同，我使用flex-basis。

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;       /*  create space between columns  */
  list-style: none;
  padding: 0;
}

li:nth-child(-n+3) {                    /*  first 3 items  */
  font-size: 24px;
  font-weight: bold;
}

li {
  flex-basis: calc(33.333% - 10px);     /*  1/3 minus 10px for a gutter  */
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  text-align: flex-start;
}

<ul>
  <li>Title</li>
  <li>Length</li>
  <li>Release Date</li>

  <li>50 Shades of Grey</li>
  <li>50 minutes</li>
  <li>2015</li>

  <li>50 Shades of Black, and a longer text so it breaks line</li>
  <li>50 minutes</li>
  <li>2015</li>

  <li>50 Shades of Grey</li>
  <li>50 minutes</li>
  <li>2015</li>

</ul>

如何在每个li元素彼此垂直下方显示两个列表？

3 个答案: