Question

我现在面临的一个问题是我有一个flexbox（应该是不相关的），内部div在父级中水平居中。我想要一个无序列表与内部div中的文本水平对齐，但即使使用text-align：center，它似乎偏离了几个像素（向右），我无法弄清楚为什么（我可以＆ “我相信直到现在我才遇到过这个问题”。＆＃39; .right＆＃39; div实际上是另一个元素的孩子，但这应该是无关紧要的，所以我只是发布我真正需要的部分。这只是ul初始风格的产物吗？

＆＃13;

.right {
  text-align: center;
  order: 2;
  //background: yellow;
  flex-basis: 100%;
  height: 100%;
}

.right .headbox{
  border-bottom: 1px solid orange;
  margin: auto;
  width: 60%;
  height: auto;
}

.right .list{
  text-align: center;
  margin: auto;
  width: 60%;
  height: auto;
}

ul{
  list-style: none;
}

.headbox h3{
  color: orange;
}

＆＃13;

<div class="right">
  
  <div class="headbox">
    <h3>Visit Us</h3>

  </div>

  <div class="list">
    <ul>
      <li>Overview</li>
      <li>Hours</li>
      <li>Admission</li>
      <li>Directions</li>
    </ul>
  </div>

</div>

＆＃13;

Answer 1

将padding: 0添加到<ul>以覆盖浏览器的默认样式。

Answer 2

您的<ul>仍然具有浏览器默认样式表中的默认填充。

您可以使用padding-left: 0;禁用该填充。

ul{
    list-style: none;
    padding-left: 0;
}

.right {
  text-align: center;
  order: 2;
  //background: yellow;
  flex-basis: 100%;
  height: 100%;
}

.right .headbox{
  border-bottom: 1px solid orange;
  margin: auto;
  width: 60%;
  height: auto;
}

.right .list{
  text-align: center;
  margin: auto;
  width: 60%;
  height: auto;
}

ul{
  list-style: none;
  padding-left: 0;
}

.headbox h3{
  color: orange;
}

<div class="right">

  <div class="headbox">
    <h3>Visit Us</h3>

  </div>

  <div class="list">
    <ul>
      <li>Overview</li>
      <li>Hours</li>
      <li>Admission</li>
      <li>Directions</li>
    </ul>
  </div>

</div>

li和p水平对齐

2 个答案: