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

Question

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

水平列表需要跨越 div 的整个宽度，但将列表项居中。当尝试让列表项平均分配给它们的空间而不是居中时，我没有得到任何结果——我不必担心水平溢出，因为如果需要我可以制作第二个水平列表。< br/>当我尝试对垂直列表执行此操作时，情况也是如此。

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

<div class="c">
  <ol class="h">
    <li>Item</li>
    <li>Line</li>
    <li>List</li>
  </ol>
  <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>

我想以此结束:

如何让水平元素和垂直列表自行填充？如果可能的话，我正在寻找不使用表格、显示:表格(等)和 flex 的结果。对我来说，额外的空间是否用 padding 或 margin 填充并不重要。

Answer 1

这个 div 容器 .c 有 90% 的宽度。所以这些属性似乎被其他类继承了。

您还有黄色背景未覆盖其他类的问题。

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

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

  <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>