html - 如何在 CSS 中排列列表元素符号？

Question

所以我在这个列表中的这些元素符号是不均匀的，我希望它们是均匀的。我不久前就找到了答案，但现在我找不到它了。如有任何帮助，我们将不胜感激。

#div1 {
  border: black;
  border-style: inset;
  margin-top: 5em;
  text-align: center;
}

.div2 {
  border: blue;
  border-style: inset;
  height: 100%;
}

#salty {
  display: block;
  transform: rotate(90deg);
  width: 45em;
  height: 50em;
  margin-left: auto;
  margin-right: auto;
}

ul {
  list-style-position: inside;
  padding-left: 0;
  margin: 10px;
}

<div class="container">

  <div class="row">

    <div class="col-md-1"></div>

    <div class="col-md-10" id="div1">
      <p id="p1">
        <h1>My Cat Salty</h1>
      </p>
      <p id="p2">
        <h2>Salty is a floofball</h2>
      </p>

      <div class="div2"><img src="babysalty.jpg" id="salty" />
        <p id="p3"> This is my cat, Salty. </p>
      </div>

      <div class="div3">
        <ul>
          <li>Salty is a cat.</li>
          <li>This is a list item.</li>
          <li>This is a list item.</li>
          <li>Salty is fluffy.</li>
          <li>This is a list item.</li>
          <li>This is a list item.</li>
          <li>Salty also has a fluffy tail.</li>
          <li>This is a list item.</li>
</ul>
      </div>

    </div>
    <div class="col-md-1"></div>
  </div>
</div>

由于某种原因，我无法让我的 CSS 显示在帖子中，所以它位于 JSFiddle 中。

https://jsfiddle.net/dus0tLyt/4/

Answer 1

将ul设置为inline-block，并将text-align列表项设置为left。

.div3 {
  text-align: center;
}

.div3 ul {
  display: inline-block;
}

.div3 ul li {
  text-align: left;
}

<div class="div3">
  <ul>
    <li>Salty is a cat.</li>
    <li>This is a list item.</li>
    <li>This is a list item.</li>
    <li>Salty is fluffy.</li>
    <li>This is a list item.</li>
    <li>This is a list item.</li>
    <li>Salty also has a fluffy tail.</li>
    <li>This is a list item.</li>
  </ul>
</div>