我怎样才能将我所有的 li 设置在中间，以便它们正确对齐答案

【问题标题】：How can I set all my li in the middle so they align properly我怎样才能将我所有的 li 设置在中间，以便它们正确对齐
【发布时间】：2022-07-03 15:59:47
【问题描述】：

我想提供 Watch 4 的规格表。现在，我有这个代码。

<div class="specs">
      <ul class="info">
        <li>Lengte</li>
        <li>44 mm</li>
      </ul>
    </div>
    <div class="specs">
      <ul class="info">
        <li>Breedte</li>
        <li>43.3 mm</li>
      </ul>
    </div>

使用此 CSS 代码

.specs{
  position: relative;
  top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.info{
  display: flex;
  flex-direction: row;
  color: black;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px black solid;
  padding: 0;
}
.info li{
  display: flex;
  flex-direction: row;
  margin-right: 200px;
  margin-left: 200px;
}

这是完整的项目https://jsfiddle.net/2wvfyg16/ 您可能需要将 CSS 选项卡放大。

在标签“Verbindungen”的底部。

都是未对齐的。

【问题讨论】：

我认为您最大的问题是每一行都用自己的<ul> 包裹，而不是用一个<ul>（或<ol>，或<dl>）来包含所有项目.
坦率地说，这看起来更像是table，而不是列表。
如果你想正确对齐那些你可以使用justify-content: center;和align-items: center;
@Paulie_D 我曾尝试使用一张桌子，但我不喜欢它的外观。
因为这是表格数据，它可能对那些使用辅助技术来设置它的人有所帮助。您能说一下您尝试时桌子的外观有什么问题吗？你想让它看起来像你的小提琴（加上第二列中的对齐）吗？

标签： html css

【解决方案1】：

由于数据似乎是表格的，这个 sn-p 是在 HTML 表格中设置两列的简单开始。

显然，您需要更改内容以提供您想要的确切布局，但它确实表明 HTML 表格可以提供所需的格式。

#specs {
  width: 100vw;
  border-collapse: collapse;
}

#specs th {
  font-size: 3em;
  text-align: left;
  padding-top: 1em;
}

#specs td {
  width: 50%;
  padding: 1em 5em;
}

#specs td {
  font-size: 2em;
}

#specs tr:not(.cat) {
  border-bottom: solid 1px black;
  padding: 1em;
}

<table id="specs">
  <tr class="cat">
    <th colspan="2">Formaat</th>
  </tr>
  <tr>
    <td>Lengte</td>
    <td>44 mm</td>
    <tr>
      <td>Breedte</td>
      <td>43.3 mm</td>
    </tr>
    <tr>
      <td>Hoogte</td>
      <td>9.8 mm</td>
    </tr>
    <tr>
      <td>Gewicht</td>
      <td>30 gram</td>
    </tr>
    <tr>
      <td>Stofdicht</td>
      <td>Ja</td>
    </tr>
    <tr>
      <td>Spatwaterdicht</td>
      <td>Ja</td>
    </tr>
    <tr>
      <td>Waterdicht</td>
      <td>Ja</td>
    </tr>
    <tr class="cat" colspan="2">
      <th colspan="2">Display</th>
    </tr>
    <tr>
      <td>Schermgrootte</td>
      <td>40 &amp; 44 mm</td>
    </tr>
    <tr>
      <td>Schermtype</td>
      <td>OLED</td>
    </tr>
    <tr class="cat" colspan="2">
      <th colspan="2">Processor</th>
    </tr>
    <tr>
      <td>Chipset</td>
      <td>Samsung Exynos W920</td>
    </tr>
    <tr>
      <td>Opslagcapaciteit</td>
      <td>16 GB</td>
    </tr>
    <tr>
      <td>Werkgeheugen</td>
      <td>1500 MB</td>
    </tr>
    <tr class="cat" colspan="2">
      <th colspan="2">Software</th>
    </tr>
    <tr>
      <td>Besturingssysteem</td>
      <td>One UI Watch</td>
    </tr>
    <tr class="cat" colspan="2">
      <th colspan="2">Sensoren</th>
    </tr>
    <tr>
      <td>Accelerometer</td>
      <td>Jas</td>
    </tr>
    <tr>
      <td>Hartslagmeter</td>
      <td>Ja</td>
    </tr>
    <tr>
      <td>Gyroscoop</td>
      <td>Ja</td>
    </tr>
    <tr>
      <td>GPS</td>
      <td>Ja</td>
    </tr>
    <tr class="cat" colspan="2">
      <th colspan="2">Batterij</th>
    </tr>
    <tr>
      <td>Capaciteit</td>
      <td>361 mAh</td>
    </tr>
    <tr>
      <td>Vervangbaar</td>
      <td>Nee</td>
    </tr>
    <tr class="cat" colspan="2">
      <th colspan="2">Verbindingen</th>
    </tr>
    <tr>
      <td>WiFi</td>
      <td>Ja</td>
    </tr>
    <tr>
      <td>Mobiel Netwerk</td>
      <td>Nee</td>
    </tr>
    <tr>
      <td>Bluetooth</td>
      <td>Bluetooth 5.0</td>
    </tr>
    <tr>
      <td>NFC</td>
      <td>Ja</td>
    </tr>
</table>

【讨论】：

非常感谢，它的工作原理和我想象的一样。

【解决方案2】：

使用 justify items center 我认为它可以解决这个问题

【讨论】：