我正在尝试制作一个包含4个字段的联系表单,在同一行中一个接一个,在平板电脑或移动设备中,字段将是100%宽度的一对一。
实际上我已经尝试了很多,而且我对css感到困惑。
这是我使用的CSS:
.one-half,
.one-third {
position: relative;
margin-right: 4%;
float: right;
margin-bottom: 20px;
}
.one-half { width: 48%; }
.one-third { width: 30.66%; }
.last {
margin-left: 0 !important;
clear: left;
}
@media only screen and (max-width: 767px) {
.one-half, .one-third {
width: 100%;
margin-right: 0;
}
}
表格是:
<div class="one-half">
[text* Fullname placeholder "full name"]
</div>
<div class="one-half">
[tel* phone placeholder "phone"]
</div>
<div class="one-half">
[email* email placeholder "email"]
</div>
<div class="one-half last">
[submit "SEND"] </div>
答案 0 :(得分:0)
将这些属性赋予您赋予float LIKE
的元素的父div<div class="container">
<div class="one-half">
[text* Fullname placeholder "full name"]
</div>
<div class="one-half">
[tel* phone placeholder "phone"]
</div>
<div class="one-half">
[email* email placeholder "email"]
</div>
<div class="one-half last">
[submit "SEND"] </div>
</div>
CSS:
container:after{
content:'';
display:table;
clear:both;
}
答案 1 :(得分:0)
Your e-mail*: <span style="display:inline-block;">[email* your-email]</span> <span style="display:inline-block;">[submit "Send"]</span>