个人中心
gpt4 book ai didi

html - 我怎样才能操纵我的 标签的位置，以便它们在我的
  • 标签中到达我想要的位置？

    • 转载 作者：行者123 更新时间：2023-11-27 23:47:34 25 4
    gpt4 key购买 nike

    标签位于 <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> 的中间。标签，但它们似乎位于左上角。

    最佳答案

    所以，给你的 <a></a>样式将宽度和高度添加到自动，以便您可以将它们定位为:

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

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

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

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

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

    25 4 0
    文章推荐： c++ - 显示1到9的数字在二维数组中出现的次数
    文章推荐： c++ - 指向包含指向 vector 指针的结构的 vector
    文章推荐： c++ - 获取用户输入以形成链表
    文章推荐： javascript - 如何让方 block 显示更流畅？