内联放置两个表单元素
雨果·帕库拉（Hugo Pakula）
我目前有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;
}
您能否为我指出正确的方向，以便我可以修复我的代码以使其在所有浏览器中都能正常工作并实现内联。
谢谢！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
将表格单元中的两个内联块元素对齐到相对侧
- 2
两个内联块元素，每个元素的宽度为50％，不能并排放置在一行中
- 3
如何将两个元素放置在表格单元的相对侧
- 4
相对放置两个可变宽度的内联块
- 5
将两个属性链接到一个表单元素
- 6
如何将表单元素映射到两个Pojo对象
- 7
垂直对齐两个内联块元素
- 8
如何在两个（内联）元素之间插入空格？
- 9
在响应式显示中使两个元素保持内联
- 10
将两个内联块元素垂直居中
- 11
两个内联块元素之间的图像
- 12
如何使用CSS并排放置两个元素
- 13
在li内以相反的方向放置两个span元素
- 14
两个inline-block元素不是内联的（行为类似于blocked元素）
- 15
如何在虾pdf生成导轨的单个表单元格中的两个元素中使用两种不同的样式？
- 16
Bootstrap 3.1中内联表单中表单元素的宽度
- 17
两个内联块和一个块元素之间的垂直空间
- 18
如何确保两个内联元素保持在同一行
- 19
HTML内联显示两个元素，无需折叠即可水平调整大小
- 20
如何在两个内联块元素之间插入换行符？
- 21
两个内联块元素始终在同一行上
- 22
保持两个元素内联，允许溢出文本换行
- 23
两个内联块元素始终在同一行上
- 24
无法获得两个选项卡以对齐为标题中的内联块元素
- 25
保持两个元素内联，允许溢出文本换行
- 26
内联排列无序列表项中的前两个元素，其余各行对齐
- 27
两个内联块未对齐
- 28
如何内联两个不同的盒子
- 29
两个内联块未对齐
我来说两句