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

实际上不是项目符号要占用的空间 -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 2

您给定的代码几乎可以，只需在样式表中使用一行 以li样式在行

下使用

 list-style-type: none;

新的li风格

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 3

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

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

list-style-type: none是可选的。