2013-03-25 17 views
-4

当你减少浏览器窗口,你会看到不同的布局为iphone 我试图对齐iphone的表单域..... 我给了边距和宽度,但仍然没有工作... 如何让所有的领域,从同一行开始....所有表单字段不是从同一行开始

Contact Us page

#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> 

回答

1

您可以使用CSS媒体查询你的时候到另一个样式应用到输入字段像下面这样减小屏幕尺寸:

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

您的问题并不十分清楚,但是,您似乎在询问如何在浏览器窗口很小时使所有表单输入元素在左侧对齐? 我现在看到,这4个输入元素(公司,电子邮件,密码,重新输入密码)有span2类别的margin-left: 12px via,有不同的显示属性,margin-right被应用于其他输入元素。

以较小的分辨率应用统一的价值观似乎为我工作:

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