Question

当您缩小浏览器窗口时，您将看到iphone的不同布局我正在尝试对齐iphone的表单字段..... 我给了保证金和宽度，但仍然没有工作...... 如何使所有字段从同一行开始....

#nameForm {
margin-right: 12px;
width: 354px;
}

#inquiryForm {
width: 273px;
}
<div class="span6">
                  <i class="bookmarkingContact"></i>
                  <h3 id="inquiryTitle" style="margin-bottom: 22px;">Inquiry</h3>
                    <input id="nameForm" type="text" name="fullname" placeholder="Name" required="required">
                    <input id="companyForm" class="span2" type="text" name="company" placeholder="Company" required="required">
                    <input id="emailForm" class="span2" type="text" name="email" placeholder="Email" required="required">
                    <input id="passwordForm" class="span2" type="password" name="password" placeholder="Password" required="required">
                    <input id="repasswordForm" class="span2" type="password" name="repassword" placeholder="Retype Password" required="required">                
                    <textarea id="inquiryForm" name="inquiry" placeholder="Inquiry" rows="3" required="required"></textarea>
                    <a id="signUp" href="javascript:void(0);" style="position: relative; top: 13px;">Sign Up</a>
                </div>

Answer 1

您可以使用css媒体查询在缩小屏幕大小时将其他样式应用于输入字段，例如：

@media only screen and (max-width: 350px) {
    input {
        width: 300px; /* put the width you want */
        float: left;
    }
}

Answer 2

您的问题不是很清楚，但是，当浏览器窗口很小时，您似乎在询问如何使所有表单输入元素在左侧对齐？我现在看到，这4个输入元素（公司，电子邮件，密码，还款字）有一个margin-left: 12px类span2，并且有不同的显示属性和margin-right被应用于其他输入元素。

以较小的分辨率应用统一值似乎对我有用：

@media screen and (max-width: 768px) {
  #registerForm input,
  #registerForm textarea {
    margin-left: 0;
    margin-right: 0;
    display: block;
  }
}

所有表单字段都不是从同一行开始的

2 个答案: