时间戳

首页 > 解决方案 > 对齐按钮和输入

html - 对齐按钮和输入

问题描述

我对此并不陌生，因此作为练习，我尝试创建 Netflix 注册页面的副本。我在网页上使用弹性盒子模型。我正在努力获取电子邮件输入和对齐的开始按钮。我尝试将按钮标签更改为锚标签并得到相同的结果。我尝试在单个元素上使用边距和填充，但没有奏效。

.landing_page_block {
  display: block;
  width: 40%;
  margin-top: 220px;
  text-align: center;
}

.landing_page_h1 {
  font-size: 65px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
  -webkit-text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8); 
}

.landing_page_phrase {
  margin: 20px 0 30px 0;
  font-weight: 300;
  letter-spacing: 1.2px;
  text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
  -webkit-text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8); 
}

.lp_box1 h5 {
  letter-spacing: 1.1px;
  font-weight: 300;
  margin-bottom: 20px;
}

.lp-box2 {
  height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.lp_box2 input {
  width: 60%;
  height: 70px;
  border: none;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  font-weight: 300;
  padding-left: 15px;
  -webkit-box-shadow: 0px 0px 24px 0px rgba(255,255,255,0.81) inset;
  -moz-box-shadow: 0px 0px 24px 0px rgba(255,255,255,0.81) inset;
  box-shadow: 0px 0px 24px 0px rgba(255,255,255,0.81) inset;
}

.get_started_btn {
  height: 70px;
  margin-left: -3px;
  width: 39%;
  font-size: 30px;
  border: none;
  border-left: 2px solid grey;
  font-weight: 300;
  color: white;
  background-color: red;
  text-decoration: none;
}
<div class="landing_page">
  <div class="landing_page_block">
    <div class="lp_box1">
      <h1 class="landing_page_h1">Unlimited films, TV programmes and more.</h1>
      <h3 class="landing_page_phrase">Watch anywhere. Cancel at any time.</h3>
      <h6>Ready to watch? Enter your email to create or restart your membership.</h6>
    </div>
    <div class="lp_box2">
      <input type="email" name="email" placeholder="Email address"/>
      <button class="get_started_btn">Get Started </button>
    </div>
  </div>
</div>

我的代码的结果 在此处输入图像描述

标签： htmlcssflexbox

解决方案

我希望这就是你想要的对齐方式

.landing_page_block {
  margin-top: 220px;
  text-align: center;
}

.landing_page_h1 {
  font-size: 65px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
  -webkit-text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
}

.landing_page_phrase {
  font-weight: 300;
  letter-spacing: 1.2px;
  text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
  -webkit-text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
}

.lp_box1 h5 {
  letter-spacing: 1.1px;
  font-weight: 300;
  margin-bottom: 20px;
}

.lp_box2 {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.lp_box2>.input-div{
  height: 70px;
  width: 62%;
}

.lp_box2>.input-div>input {
  height: 70px;
  width: 100%;
  border: none;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  font-weight: 300;
  padding-left: 15px;
  -webkit-box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.81) inset;
  -moz-box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.81) inset;
  box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.81) inset;
}

.get_started_btn {
  height: 70px;
  width: 30%;
  font-size: 30px;
  border: none;
  border-left: 2px solid grey;
  font-weight: 300;
  color: white;
  background-color: red;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="landing_page">
  <div class="landing_page_block">
    <div class="lp_box1">
      <h1 class="landing_page_h1">Unlimited films, TV programmes and more.</h1>
      <h3 class="landing_page_phrase">Watch anywhere. Cancel at any time.</h3>
      <h6>Ready to watch? Enter your email to create or restart your membership.</h6>
    </div>
    <div class="lp_box2">
      <div class="input-div">
        <input type="email" name="email" placeholder="Email address" />
      </div>
      <div class="get_started_btn">Get Started </div>
    </div>
  </div>
</div>

推荐阅读