如何在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>

Answer 2

首先，你需要使用<ul>关闭你的</ul>标签。

你的<li>不均匀的原因是<ul>的造型是text-align: center;。尝试将其更改为text-align: left;

对于我的猜测，你可能想要居中<ul>，所以我的风格更多，以使<ul>居中。

#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;
  text-align: left;
  max-width: 35%;
  margin: auto;
}

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