Question

我一直试图让我的表单元素在移动屏幕上缩小。

我已将所有宽度更改为100％，但文本输入区域仍会溢出屏幕。

我到底做错了什么？

HTML

<section id="con" data-type="background" data-speed="10">
    <section id="c">
        <div class="title">Say Hello</div>
          <div id="details">
            <p><b>Phone:</b> </p>
            <p><b>Email:</b> </p>
            <p><b>Skype:</b> </p>
          </div>
<div id="contactBox">
    <form action="contact.php" method="get" id="contactForm">
        <div id="formLeft">
            <fieldset>
                <ul>
                    <li>
                      <label for="first">First Name</label>
                      <input type="text" name="first" id="first" tabindex="10">
                    </li>
                    <li>
                      <label for="last">Last Name</label>
                      <input type="text" name="last" id="last" tabindex="20">
                    </li>
                    <li>
                      <label for="company">Company Name</label>
                      <input type="text" name="company" id="company" tabindex="30">
                    </li>
                    <li>
                      <label for="email">Email</label>
                      <input type="email" name="email" id="email" tabindex="40">
                    </li>
                    <li>
                      <label for="phone">Phone</label>
                      <input type="text" name="phone" id="phone" tabindex="50">
                    </li>
                    <li>
                      <label for="contactYou">Contact you by...</label>
                      <br>
                      <select name="contactYou" size="1" id="contactYou" tabindex="60">
                        <option value="" selected="selected">- select</option>
                        <option value="email">Email</option>
                        <option value="phone">Phone</option>
                      </select>
                    </li>
                </ul>
            </fieldset>
        </div>
        <div id="formRight">  
            <fieldset>
                <ul>
                    <li>
                      <label for="interest">I am interested in...</label>
                      <br>
                      <select name="interest" size="1" id="interest" tabindex="80">
                        <option value="" selected="selected">- select</option>
                        <option>Creating a new website</option>
                        <option>Redesigning a current website</option>
                        <option>Reponsive web design</option>
                        <option>A WordPress website</option>
                        <option>General enquiry</option>
                      </select>
                    </li>
                    <li>
                      <label for="budget">My budget is...</label>
                      <br>
                      <select name="budget" size="1" id="budget" tabindex="90">
                        <option value="" selected="selected">- select</option>
                        <option>€100 - €500</option>
                        <option>€500 - €1,000</option>
                        <option>€1,000 - €2,000</option>
                        <option>€2,000 - €5,000</option>
                        <option>€5,000 - €10,000</option>
                        <option>€10,000+</option>
                      </select>
                    </li>           
                    <li>
                      <label for="message">How can I help you?</label>
                      <textarea name="message" id="message" cols="45" rows="5" tabindex="100"></textarea>
                    </li>
                </ul>
          </fieldset>
        </div>
        <div id="formSubmit">
            <ul>
                <li>
                  <input type="submit" name="submit" id="submit" value="Send Message" tabindex="70">
                </li>
            </ul>
        </div>
            </form>
        </div>
    </section>
</section>

CSS

#con {
    width:100%;
    margin:auto;
    height:auto;
}

#c {
    padding:20px;
    text-align:center;
    height:auto;
    padding-top:110px;
}

#details {
    margin:auto;
    width:100%;
    height:70px;
    border-bottom:1px #e0e0e0 solid;
}

#details p {
    text-align:center
}

#contactBox {
    height:auto;
    width:100%;
    text-align:left;
}

#formLeft {
    font-family: 'Open Sans', sans-serif;
    width:100%;
    overflow:hidden;
    float:inherit;

}

#formRight {
    font-family: 'Open Sans', sans-serif;
    width:100%;
    overflow:hidden;
    float:inherit;  
    height:468px;
    padding:0px;
}

#formSubmit {

}

fieldset {
    border:none;
    padding:0px;
    margin:0px;
    width:100%
}

#contactBox ul {
    list-style:none;
    width:100%; 
}

#contactBox li {
    margin-top:10px;
    width:100%;
}

input[type="text"],input[type="email"],input[type="tel"],input[type="url"],textarea {
    border:none;
    background:#e3cfe2;
    width:85%;
    height:40px;
    margin-top:4px;
    padding-left:8px;
    font-size:1em;
    font-weight:normal;
    font-family: 'Open Sans', sans-serif;
}

label {
    clear:both;
    background:yellow;
    float:left;
}

textarea {
    padding-top:6px;
    height:268px;
    width:100%;
    max-height:268px;
    font-size:1em;
    font-weight:normal;
    font-family: 'Open Sans', sans-serif;
}

input:focus, textarea:focus {
    outline:none;
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(105,66,100,1);
    -moz-box-shadow: inset 0px 0px 10px 0px rgba(105,66,100,1);
    box-shadow: inset 0px 0px 10px 0px rgba(105,66,100,1);
}

input[type="submit"] {
    font-family: 'Open Sans', sans-serif;
    font-size:1em;
    background:#694264;
    color:white;
    padding:16px;
    border:none;
    cursor:pointer; 
    margin:20px 0px;
    width:100%;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}

input[type="submit"]:hover {
    background:#b58bab;
    color:black;
}

select {
    background:#e3cfe2;
    height:42px;
    width:100%;
    border:none;
    margin-top:4px;
    padding-left:8px;
    font-family: 'Open Sans', sans-serif;
}

option {
    background:white;
}

Answer 1

添加此项 - meta name =“viewport”content =“width = device-width，initial-scale = 1” 看看你的元标记。

使表单元素响应

1 个答案: