Question

我有3个按钮，试图将它们排成一行（例如prev btn，middle btn，next btn），现在我只是将其显示为一个按钮，将其显示在其他2个按钮的顶部。我无法更改html只是css fyi

    body {
      color: #838383;
      font-family: "Mada", sans-serif;
      font-size: 0.875rem;
    }

    .post .pagination {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
    }

    .post .pagination a {
      width: 48%;
    }

    .post .pagination .link {
      border: 2px solid #007cad;
      text-align: center;
      margin-bottom: 0.75rem;
      padding: 0.5rem;
    }

    .post .pagination a,
    .post .pagination .view-all {
      text-decoration: none;
      color: #007cad;
      font-weight: 700;
    }

    .post .pagination .view-all {
      width: 100%;
    }

    /* hover effects */
    .pagination .link {
      background: #fff;
      color: #007cad;
      background-size: 250% 100%;
    }

    .pagination .next .link {
      background: linear-gradient(to left, #fff 50%, #007cad 50%);
      background-size: 250% 100%;
      background-position: right top;
      transition: all 0.5s ease;
      max-width: 250px;
    }

    .pagination .prev .link {
      background: linear-gradient(to right, #fff 50%, #007cad 50%);
      background-size: 250% 100%;
      background-position: left top;
      transition: all 0.5s ease;
      max-width: 250px;
    }

    .pagination .next .link:hover {
      background-position: left top;
    }

    .pagination .prev .link:hover {
      background-position: right top;
    }

    .pagination .next .link:hover,
    .pagination .prev .link:hover {
      background-color: #007cad;
      color: #fff;
      opacity: 1;
    }

    @media only screen and (min-width: 1366px) {
      .post .pagination {
        padding-right: 0.9375rem;
        padding-left: 0.9375rem;
        max-width: 50rem;
        margin: 0px auto 0 auto;
      }
    }

      <body>
        
        <div class="post grid-x grid-padding-x">
            <div class="small-12 medium-10 medium-offset-1 cell pagination"> 
                <a class="view-all">
                    <div class="link">View full team member list</div>
                </a>
                    <a class="prev">
                        <div class="link">&lt; Prev bio</div>
                    </a>
                    <a class="next">
                        <div class="link">Next bio &gt;</div>
                    </a>

            </div>
        </div>
      </body>

我有3个按钮正试图排成一行（例如上一个btn，中间btn，下一个btn），现在我只是将其显示为一个按钮，将其显示在其他2个按钮的顶部。 flexbox可以显示当前状态，但是我很难像我上载的解决方案图片一样将这些按钮对齐。

  <body>

    <div class="post grid-x grid-padding-x">
        <div class="small-12 medium-10 medium-offset-1 cell pagination"> 
            <a class="view-all">
                <div class="link">View full team member list</div>
            </a>
                <a class="prev">
                    <div class="link">&lt; Prev bio</div>
                </a>
                <a class="next">
                    <div class="link">Next bio &gt;</div>
                </a>

        </div>
    </div>
  </body>

Answer 1

您可以使用display：flex;如果无法更改结构，则可以移动元素。（不建议）。如果您可以更改HTML本身，则会更加容易。如果要将它们彼此相邻，可以使用一些CSS flexbox。

您可以在此处了解有关flexbox的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    body {
      color: #838383;
      font-family: "Mada", sans-serif;
      font-size: 0.875rem;
    }

    .post .pagination {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
    }

    .post .pagination a {
      flex: 1; /* changed */
      margin: 10px; /* added */
    }

    .post .pagination .link {
      border: 2px solid #007cad;
      text-align: center;
      margin-bottom: 0.75rem;
      padding: 0.5rem;
    }

    .post .pagination a,
    .post .pagination .view-all {
      text-decoration: none;
      color: #007cad;
      font-weight: 700;
    }

    .post .pagination .view-all {
      /* width: 100%; -- removed */
      order: 2;
    }
    
    /* added */
    .post .pagination .next {
      order: 3;
    }
    /* end added */

    /* hover effects */
    .pagination .link {
      background: #fff;
      color: #007cad;
      background-size: 250% 100%;
    }

    .pagination .next .link {
      background: linear-gradient(to left, #fff 50%, #007cad 50%);
      background-size: 250% 100%;
      background-position: right top;
      transition: all 0.5s ease;
      max-width: 250px;
    }

    .pagination .prev .link {
      background: linear-gradient(to right, #fff 50%, #007cad 50%);
      background-size: 250% 100%;
      background-position: left top;
      transition: all 0.5s ease;
      max-width: 250px;
    }

    .pagination .next .link:hover {
      background-position: left top;
    }

    .pagination .prev .link:hover {
      background-position: right top;
    }

    .pagination .next .link:hover,
    .pagination .prev .link:hover {
      background-color: #007cad;
      color: #fff;
      opacity: 1;
    }

    @media only screen and (min-width: 1366px) {
      .post .pagination {
        padding-right: 0.9375rem;
        padding-left: 0.9375rem;
        max-width: 50rem;
        margin: 0px auto 0 auto;
      }
    }

<div class="post grid-x grid-padding-x">
  <div class="small-12 medium-10 medium-offset-1 cell pagination">
    <a class="view-all" href="<?= get_field('team_page', 'options') ?>">
      <div class="link">View full team member list</div>
    </a>
    <a class="prev">
      <div class="link">&lt; Prev bio</div>
    </a>
    <a class="next">
      <div class="link">Next bio &gt;</div>
    </a>

  </div>
</div>

如何使用flexbox水平放置3个按钮？

1 个答案: