在不考虑项目符号点的情况下将 <li> 元素居中

Question

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

#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，但这只是隐藏了要点，它们占用的 space 仍然存在。

Answer 1

只需将 margin-left 添加到 -40px 的 <li> 元素以抵消项目符号点添加的 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 是可选的。

Answer 2

实际上不是space被项目符号点占据 - 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

你给出的代码几乎没问题，只需要一行就可以了 sheet 在 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;
 }

在不考虑项目符号点的情况下将 <li> 元素居中

Centering an <li> element without taking bullet point into account

html

css

centering