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

Question

<分区>

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>