Question

我有一个按钮和一个与flexbox列对齐的链接。我想改变链接和按钮以适应最大宽度的一行：800px;我搜索过，找不到符合我需要的答案。希望有人可以提供帮助，这可能很容易解决，但我似乎无法弄明白。

这是我的CSS＆amp; HTML：

＆＃13;

.landing {
  position: relative;
}
#pic {
  display: flex;
}
#pic figcaption {
  position: absolute;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  font-size: 7vw;
  z-index: 1;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  color: #ffff66;
}
@media (max-width: 800px) {
  .buttonWrapper {
    display: flex;
    flex-direction: row;
  }
}
/*****Signup button*****/

.home-signup {
  position: absolute;
  font-size: 2.5vw;
  border: 2px solid #ffff66;
  border-radius: 10px;
  color: #ffff66;
  padding: 0.5em 2.5em;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  cursor: pointer;
}
/****login button****/

.home-login {
  position: absolute;
  font-size: 1.8em;
  color: #ffff66;
  top: 72%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

＆＃13;

<section class="landing">
  <figure id="pic">
    <img srcset="images/detail/landingBig.jpg 1920w,
                  images/detail/landingMedium.jpg 960w,
                  images/detail/landingSmall.jpg 480w" sizes="100vw" src="images/detail/landingMedium.jpg" alt="Top Banner with pic of two speakers on a wooden floor">
    <figcaption>Collabo</figcaption>
  </figure>
  <div class="buttonWrapper">
    <button class="home-signup">Signup</button>
    <a class="home-login" href="#">Login</a> 
  </div>
</section>

＆＃13;

Answer 1

我会对一些规则进行重置并最后写入或加载mediaqueries：

@media (max-width: 800px) {
  .buttonWrapper {
    display: flex;
    border: solid;
    flex-direction: row;
    left: 0;
    width: 100%;
    justify-content: center;
    position: absolute;
    top: 60%;
  }
  .home-signup,
  .home-login {
    transform: scale(1);
    margin: 1em;
    position: static;
  }
}

.landing {
      position: relative;
    }
    #pic {
      display: flex;
    }
    #pic figcaption {
      position: absolute;
      text-transform: uppercase;
      letter-spacing: 0.5em;
      font-size: 7vw;
      z-index: 1;
      top: 30%;
      left: 50%;
      transform: translateX(-50%);
      color: #ffff66;
    }

    /*****Signup button*****/

    .home-signup {
      position: absolute;
      font-size: 2.5vw;
      border: 2px solid #ffff66;
      border-radius: 10px;
      color: #ffff66;
      padding: 0.5em 2.5em;
      top: 60%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: none;
      cursor: pointer;
    }
    /****login button****/

    .home-login {
      position: absolute;
      font-size: 1.8em;
      color: #ffff66;
      top: 72%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer;
    }

 @media (max-width: 800px) {
  .buttonWrapper {
    display: flex;
    border: solid;
    flex-direction: row;
    left: 0;
    width: 100%;
    justify-content: center;
    position: absolute;
    top: 60%;
  }
  .home-signup,
  .home-login {
    transform: scale(1);
    margin: 1em;
    position: static;
  }
}

<section class="landing">
      <figure id="pic">
        <img  src="http://lorempixel.com/800/600" alt="Top Banner with pic of two speakers on a wooden floor">
        <figcaption>Collabo</figcaption>
      </figure>
      <div class="buttonWrapper">
        <button class="home-signup">Signup</button>
        <a class="home-login" href="#">Login</a> 
      </div>
    </section>

需要帮助将列堆叠链接弯曲成一行

1 个答案: