居中一个 元素没有考虑子弹点[重复]

Question

这个问题在这里已有答案：

• Does UL have default margin or padding [duplicate] 2回答

我不确定如何将我的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 {
    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

只需将qazxsw poi添加到qazxsw poi的qazxsw poi元素中，以抵消由子弹点添加的margin-left：

<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;
}

是可选的。