制作水平列表占据整个div宽度，而垂直列表占用最小宽度并填充其余部分

Question

我有一个预定宽度的元素，在该元素中我有一个或多个列表。每个列表都有一个定义是水平还是垂直的类。

水平列表需要跨越div的整个宽度，但是以列表项为中心。当试图使列表项平均分配给他们的空间而不仅仅是居中时，我得不到任何结果 - 我不必担心水平溢出，因为如果需要，我可以制作第二个水平列表。登记/> 当我尝试使用垂直列表时，情况也是如此。

master

.c {
  display: block;
  width: 90%;
  background: orange;
  padding: 1% 5%;
  text-align: center;
}

ol {
  list-style-type: none;
  padding: 0;
}

.h {
  display: block;
  background: blue;
}

.h li {
  display: inline-block;
  background: green;
}

.v {
  display: inline-block;
  background: red;
}

.v li {
  background: violet;
}

我想最终得到这个：

如何让水平项目自动填充，以及垂直列表？我正在寻找结果而不使用表格，显示：表格（等）和flex，如果可能的话。如果额外的空间填充了填充或边距并不重要。

Answer 1

您有4个选项;

1. 为所有可能数量的水平列表元素制定CSS规则
2. 使用表格
3. 使用JavaScript
4. 使用flex

我可以为所有这些选项编写示例，或者只是您喜欢的选项。

Answer 2

此div容器.c的宽度为90％。 所以这些属性似乎是由其他类继承的。

你也有黄色背景的问题没有覆盖其他类。

我所做的更改是创建一个新类来包装所有内容，以确保它都具有黄色背景，我还将.c div包装在其他2个类中，并将.h类更改为显示内联块，这意味着您可以设置元素的高度和宽度，同时保持其内联，我将宽度设置为100％并将文本对齐到中心。

＆＃13;

＆＃13;

.d {
  background: orange;
}

.c {
  display: block;
  width: 90%;
  
  padding: 1% 5%;
  text-align: center;
}

ol {
  list-style-type: none;
  padding: 0;
}

.h {
  text-align: center;
  display: inline-block;
  width: 100%;
  background: blue;
}

.h li {
  display: inline-block;
  background: green;

}

.v {
  display: inline-block;
  background: red;
}

.v li {
  background: violet;
}

＆＃13;

  <div class="d">
  <ol class="h">
    <li>Item</li>
    <li>Line</li>
    <li>List</li>
  </ol>
<div class="c">
  <ol class="v">
    <li>Item</li>
    <li>Line</li>
    <li>List</li>
  </ol>
  <ol class="v">
    <li>Item</li>
    <li>Line</li>
    <li>List</li>
  </ol>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;