Question

标签位于我要放入的<li>标签区域的外面。我希望标签位于灰色区域的中心并带有大量填充，以便可以像按钮一样使用它们。我必须弄乱一些东西才能使按钮响应，这导致位置混乱。

我试图弄乱这个职位：属性，因为我认为这是导致事情陷入困境的原因，还尝试了更改显示：属性。

main div ul.primary-list {
  width: 100%;
  display: grid;
  grid-template-columns: .5% 1fr 1fr .5%;
  grid-template-rows: 50% 50%;
  grid-template-areas: ". bathroom bedrooom ."". kitchen livingroom .";
}

main div ul.primary-list li#bathroom-button {
  grid-area: bathroom;
  text-align: center;
  background-color: #d1d1d1;
  position: relative;
  width: 100%;
  border: 2px solid #000;
  border-top-left-radius: 300px;
}

main div ul.primary-list li#bathroom-button:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

main div ul.primary-list li#bathroom-button a {
  position: absolute;
  display: block;
  margin: 0 auto;
  height: 100%;
}

main div ul.primary-list li#bedroom-button {
  text-align: center;
  grid-area: bedrooom;
  background-color: #d1d1d1;
  position: relative;
  width: 100%;
  border-top-right-radius: 300px;
}

main div ul.primary-list li#bedroom-button:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

main div ul.primary-list li#bedroom-button a {
  position: absolute;
  display: block;
  margin: 0 auto;
  height: 100%;
}

main div ul.primary-list li#kitchen-button {
  text-align: center;
  grid-area: kitchen;
  background-color: #d1d1d1;
  position: relative;
  width: 100%;
  border-bottom-left-radius: 300px;
}

main div ul.primary-list li#kitchen-button:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

main div ul.primary-list li#kitchen-button a {
  position: absolute;
  display: block;
  margin: 0 auto;
  height: 100%;
}

main div ul.primary-list li#livingroom-button {
  text-align: center;
  grid-area: livingroom;
  background-color: #d1d1d1;
  position: relative;
  width: 100%;
  border-bottom-right-radius: 300px;
}

main div ul.primary-list li#livingroom-button:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

main div ul.primary-list li#livingroom-button a {
  position: absolute;
  display: block;
  margin: 0 auto;
  height: 100%;
}

<body>
  <header>
    <div>
      <h1>The Essential List</h1>
    </div>

  </header>
  <main>
    <h2>Pick an area</h2>

    <div>

      <ul class="primary-list">
        <li id="bathroom-button"><a href="#">Bathroom</a></li>
        <li id="bedroom-button"><a>Bedroom</a></li>
        <li id="kitchen-button"><a>Kitchen</a></li>
        <li id="livingroom-button"><a>Living Room</a></li>
      </ul>

    </div>

  </main>
  <footer>

    <div>
      <p>Somethingsomethingsomething</p>
    </div>

  </footer>

  <script>
  </script>
</body>

我当时希望 <a>标签继续嵌套在我的<li>标签中间，但它们似乎位于左上角。 / p>

Answer 1

因此，在您的<a></a>样式中，将宽度和高度添加为自动，以便您可以通过以下方式放置它们：

position: absolute;
left: 50%;
top: 50%;
transform: translate(50%,-50%);

它将居中，然后您也可以在其中添加填充。

其他选项是将宽度和高度设置为100％，然后设置：

text-align: center;
vertical-align: middle;
line-height: 100%;

但这会阻止添加填充，除非您在<a></a>内添加一些选择器

如何操纵<a>标记的位置，以便它们到达我在<li>标记中所需的位置？

1 个答案: