居中 <li> 元素而不考虑项目符号[重复]

Question

我不确定如何将我的li 元素置于浅绿色空间的中心，这只是基于我在它们周围创建的绿色方块。截至目前，CSS 包括居中时项目符号占用的空间，这是我不想要的。

#square {
  position: fixed;
  width: 350px;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgb(230, 255, 230);
}

ul {
  position: relative;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

li {
  margin-top: 40px;
  padding-left: 75px;
  border-color: white;
  border-width: 2px;
  border-style: solid;
  padding: 5px 20px 5px 20px;
  background-color: green;
  border-radius: 10px;
  width: 100px;
  text-align: center;
}

.navlink {
  text-decoration: none;
  color: white;
}

<div id="square">
  <ul>
    <li><a class="navlink" href="#">Introduction</a></li>
    <li><a class="navlink" href="#">Middle</a></li>
    <li><a class="navlink" href="#">End</a></li>
  </ul>
</div>

我尝试将list-style-type: none; 应用于ul，但这只是隐藏了要点，它们占用的空间仍然存在。

Answer 1

您给定的代码几乎没问题，只需在样式表中使用一行 在 li 样式中使用下面的行

 list-style-type: none;

新李风格的样子

li {
    margin-top: 40px;
    padding-left: 75px;
    list-style-type: none;
    border-color: white;
    border-width: 2px;
    border-style: solid;
    padding: 5px 20px 5px 20px;
    background-color: green;
    border-radius: 10px;
    width: 100px;
    text-align: center;
 }

Answer 2

它实际上并不是 项目符号占用的空间 - ul 元素有一个默认的 padding-left - 只需将其重置为零：

理想情况下，您应该只重置padding 而不是负边距 - 请参阅下面的演示：

#square {
  position: fixed;
  width: 350px;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgb(230, 255, 230);
}

ul {
  position: relative;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style-type: none; /* hide bullet points */
  padding-left: 0; /* ADDED */
}

li {
  margin-top: 40px;
  padding-left: 75px;
  border-color: white;
  border-width: 2px;
  border-style: solid;
  padding: 5px 20px 5px 20px;
  background-color: green;
  border-radius: 10px;
  width: 100px;
  text-align: center;
}

.navlink {
  text-decoration: none;
  color: white;
}

<div id="square">
  <ul>
    <li><a class="navlink" href="#">Introduction</a></li>
    <li><a class="navlink" href="#">Middle</a></li>
    <li><a class="navlink" href="#">End</a></li>
  </ul>
</div>

Answer 3

只需在-40px 的<li> 元素中添加一个margin-left，以抵消由项目符号添加的margin：

#square {
  position: fixed;
  width: 350px;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgb(230, 255, 230);
}

ul {
  position: relative;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style-type: none;
}

li {
  margin-top: 40px;
  margin-left: -40px;
  border-color: white;
  border-width: 2px;
  border-style: solid;
  padding: 5px 20px 5px 20px;
  background-color: green;
  border-radius: 10px;
  width: 100px;
  text-align: center;
  list-style-type: none;
}

.navlink {
  text-decoration: none;
  color: white;
}

<div id="square">
  <ul>
    <li><a class="navlink" href="#">Introduction</a></li>
    <li><a class="navlink" href="#">Middle</a></li>
    <li><a class="navlink" href="#">End</a></li>
  </ul>
</div>

<ul> 上的list-style-type: none 是可选的。