html - 对齐内容的对齐问题 - reactjs app

Question

我需要将选项 1、2、3、4 对齐在一条直线上。
选项 3 和 4 居中。它应该与 1 和 2 对齐。
我该如何更改？

我的CSS代码如下：结果框是容器。results-header 是“投票结果”，选项在“结果”中。我使用了 justify-content “拉伸”，但它不起作用。

.result-box {
  background-color:#E8E8E8;
}

.results-header {
  color: grey;
  font-size: 20px;
  font-family: 'Gill Sans';
  margin: 0px;
  padding-top: 2px;
}

.results {
  color:#00B2EE;
  align-items: center;
  justify-content: stretch;
  font-size: 20px;
  font-family: 'Gill Sans';
  margin: 0px;
}

标签： htmlcssreactjs

Answer 1

这是一个将四个项目正确对齐到左侧的示例。

.results {
  text-align: center;
}

.results-title {
  margin: 0
}

.results-content {
  display: inline-flex;
  flex-direction: column;
  text-align: left;
  padding-left: 0;
}

<div class="results">
  <h3 class="results-title">Poll results:</h1>
  <ol class="results-content">
    <li>Node.js</li>
    <li>Java</li>
    <li>Python</li>
    <li>C#</li>
  </ol>
</div>