如何解决对齐按钮并输入
我对此很陌生,因此作为练习,我尝试创建 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.8);
-webkit-text-shadow: 5px 5px 15px 5px rgba(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.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,0.81) inset;
-moz-Box-shadow: 0px 0px 24px 0px rgba(255,0.81) inset;
Box-shadow: 0px 0px 24px 0px rgba(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>
我的代码的结果
解决方法
我希望这就是你想要的对齐方式
.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.8);
-webkit-text-shadow: 5px 5px 15px 5px rgba(0,0.8);
}
.landing_page_phrase {
font-weight: 300;
letter-spacing: 1.2px;
text-shadow: 5px 5px 15px 5px rgba(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,0.81) inset;
-moz-box-shadow: 0px 0px 24px 0px rgba(255,0.81) inset;
box-shadow: 0px 0px 24px 0px rgba(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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。