在iphone布局中,文本框被切断了

时间:2013-03-26 19:44:05

标签: javascript html css html5 css3

当您将浏览器窗口缩小为iphone布局时.... 你可以看到不同的布局...... 问题是文本字段的右侧被切断了... 如何解决它... 在下面提供我的代码.....

http://jsfiddle.net/jPvzL/1/

<input type="text" placeholder="Company Name " name="fullname" maxlength="30" required="required" id="id_username">
<input type="text" placeholder="Contact Name" name="company" maxlength="30" required="required" id="id_company">
<input type="text" placeholder="Address1" name="email" maxlength="75" required="required" id="id_email">
<input type="password" placeholder="Address2" name="password" maxlength="16" required="required" id="id_password">
<input type="password" placeholder="Address3" name="repassword" required="required" id="id_repassword">
<input type="text" placeholder="City " name="fullname" maxlength="30" required="required" id="id_username">
<div class="controls">
    <select name="select" id="state" style="width: 300px;height: 38px;">
        <option value="California" selected="">California</option>
        <option value="New York">New York</option>
        <option value="Texas">Texas</option>
    </select>
</div>
<input type="text" placeholder="Zip" name="email" maxlength="75" required="required" id="id_email">
<div class="controls">
    <select name="select" id="country" style="width: 300px;height: 38px;">
        <option value="USA" selected="">USA</option>
        <option value="India">India</option>
        <option value="Korea">Korea</option>
        <option value="Vietnam">Vietnam</option>
    </select>
</div>
<input type="text" placeholder="Phone" name="company" maxlength="30" required="required" id="id_company">
<input type="text" placeholder="Fax" name="email" maxlength="75" required="required" id="id_email">
<input type="password" placeholder="Email" name="password" maxlength="16" required="required" id="id_password">
<input type="text" placeholder="URL" name="company" maxlength="30" required="required" id="id_company">
<input type="text" placeholder="GL Account" name="email" maxlength="75" required="required" id="id_email">
<input type="password" placeholder="" name="password" maxlength="16" required="required" id="id_password">
<textarea name="inquiry" placeholder="Notes" rows="3" required="required" id="id_inquiryForm" style="width:290px;"></textarea>

2 个答案:

答案 0 :(得分:0)

您的#signup-modal div看起来设置为125px的宽度。只需将其增加到适合输入的正确尺寸即可。或者删除'overflow:hidden'

答案 1 :(得分:0)

几个星期前有这个问题。我不知道您的CSS是什么样的,但请尝试在输入字段中添加百分比宽度:

form input{width: 99%;}

YMMV。您可能还需要为textarea添加一些内容并选择字段并根据需要调整百分比。