我目前有 1 个表单,里面有 2 个元素(一个电子邮件输入和一个提交按钮)。这个表格对我来说是这样的: 但是我的一些同事似乎看起来像这样:
我的相关 HTML 如下所示:
<header>
<div class="wrap nopad">
<h1>Share and Listen to Music.</h1>
<form>
<input type="email" placeholder="Email address to get started"><input type="submit" value="Get Started">
</form>
</div>
</header>
相关的 CSS 如下所示:
body {
background-color: #1B1B1E;
color: #fff;
margin:0;
padding: 0;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.wrap {
width:685px;
padding:0 15px;
margin:0 auto;
display: block;
}
.wrap.nopad {
width:700px;
padding: 0;
}
header {
width:100%;
padding:200px 0 100px;
background-color: #2de6c0;
display: block;
}
header .wrap h1 {
color:#000;
text-align: center;
display: block;
font-weight:bolder;
text-transform: uppercase;
font-size:45.4px;
letter-spacing: 0px;
}
header .wrap h1 span {
text-decoration: underline;
}
header form {
padding:20px 0 0;
width:660px;
margin:0 auto;
}
input[type=email] {
color:#000;
padding:20px;
display: inline-block;
outline: 0;
border: 0;
width:470px;
text-transform: uppercase;
font-size:24px;
font-weight: 500;
}
input[type=submit] {
background-color: #000;
color:#FFF;
text-transform:uppercase;
font-size:16px;
padding:25px 20px;
display: inline-block;
font-weight:500;
outline: 0;
border: 0;
cursor: pointer;
float: right;
}
能否请您指出正确的方向,以便我可以修复我的代码以在所有浏览器中工作并内联。
谢谢!
最佳答案
Reduce the padding of black submit button button.
input[type=submit]
{
padding: 25px 16px;
}
查看演示
It ll give you best design
input email button --> Width:71.4%
submit button ---> Remove left and right padding and add width 22.54%
关于html - 内联放置两个表单元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28654740/