css 无序列表项彼此略微偏离中心[重复]

f0brbegy 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(134)

此问题已在此处有答案：

How do I get the bullets of an unordered list to center with the text?（5个答案）
3天前关闭。
我遇到了无序列表项目之间稍微偏离中心的问题。我是新手。有人能建议吗？
我认为使用中心对齐会导致所有文本都是对称的，但每个列表项都有点歪斜。我也尝试使用list-style-position：里面;按照其他答案，但这似乎没有帮助。

.list {
  text-align: center;
  padding-left: 0;
  list-style-position: inside;
  font-style: normal;
  font-family: cursive;
  color: teal;
  display: block;
  border-spacing: 5px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
  width: 92.35%;
  background-color: bisque;
}

<div class="header">
  <h1> Birthday Time!</h1>

  <div class="list">
    <h3> What to bring:</h3>

    <ul>
      <li> Balloons</li>
      <li> Pinata</li>
      <li> Crisps</li>
    </ul>
  </div>

css

来源：https://stackoverflow.com/questions/76526554/unordered-list-items-slightly-off-center-from-one-another

1条答案

按热度按时间

8e2ybdfx1#

.list {
  text-align: center;
  padding-left: 0;
  list-style-position: inside;
  font-style: normal;
  font-family: cursive;
  color: teal;
  display: block;
  border-spacing: 5px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
  width: 92.35%;
  background-color: bisque;
}

.list ul {
  text-align: left;
  padding: 0;
  display: inline-block;
}

<div class="header">
  <h1> Birthday Time!</h1>

  <!--Date-->
  <h2> On the 13th March </h2>
  <img class="cake" src="https://i.pinimg.com/originals/a9/72/bd/a972bdeb55940936f87036c7d4b14dfb.jpg" alt="picture of a birthday cake styled as mountains" width="300">
  <br>
</div>

<!--Item list-->
<div class="list">
  <h3> What to bring:</h3>
  <ul style="">
    <li> Balloons</li>
    <li> Pinata</li>
    <li> Crisps</li>
  </ul>  
</div>

赞(0）回复(0）举报 2023-06-25

我来回答

css 无序列表项彼此略微偏离中心[重复]

1条答案

相关问题

热门标签

最新问答