Question

正如您在下面的图片和JSFiddle http://jsfiddle.net/GRFX4/上看到的那样，我在表单的文本字段中有一些额外的空间。看起来由于某种原因它超出了容器的边缘。知道问题是什么吗？非常感谢

enter image description here

HTML：

<div id="contactwrapper">
<div class="block clear">
<div class="block-left">
<h1>Nous contacter</h1>
<div id="addressbox">
<h3>Centre de msd</h3>
      <p> 546, avenue ffds dfdsfd</p>
      <p> A-1234 fdfdfsf (Austria)</p>

        <ul id="contact">
          <li><i class="icon-phone-sign"></i> +352 691 123.456</li>
          <li><i class="icon-envelope"></i><a href="#"> geyi@iyiyiy.com</a></li>
          <li><i class="icon-map-marker"></i><a href="http://goo.gl/m2"> itinéraire</a></li>
        </ul>

</div>  <!-- End DIV addressbox -->

</div>  <!-- End DIV block-left -->
<div class="block-right">  <h1>Formulaire de contact</h1>
            <!-- CONTACT FORM-->
            <div class="contact-form">




                  <form id="contactfrm" method="post" class="clearfix">
                        <div class="clearfix">
                            <input id="name" name="name" placeholder="Nom" type="text" value="">
                            <input id="email" name="email" placeholder="Email" type="email" value="">
                        </div>

                        <textarea id="message" name="message" placeholder="Message et coordonnées"></textarea>

                        <input type="submit" value="Envoyer" name="submit">

      <p class="success" style="display:none">Merci pour votre message!<br> Nous vous répondrons très rapidement.</p>
      <p class="error" style="clear:both;display:none;color:red; text-align:center">Erreur: E-mail non valide et/ou message vide.</p>
                    </form>
                </div><!-- /.contact-form -->
    </div>  <!-- End DIV block-right -->
     </div>  <!-- End DIV Block -->
    </div>  <!-- End DIV Contactwrapper -->

CSS：

#contactwrapper {
    margin-top: 30px;
    padding-bottom: 30px;
    position: relative;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
    background: #fff;
    -webkit-box-shadow: 0px 0px 10px 2px #e0e0e0;
    -moz-box-shadow: 0px 0px 10px 2px #e0e0e0;
    box-shadow: 0px 0px 10px 2px #e0e0e0;
}
.block-left {
    float: left;
    box-sizing: border-box;
    width: 50%;
    padding-right: 20px;
}
.block-right {
    float: right;
    box-sizing: border-box;
    width: 50%;
}

.clear:after { clear: both }
.clear { clear: both }

#addressbox p {
    color: #333;
    font-weight: 400;
    font-size: 13px;
    line-height: 12px;
}
#contact li {
    display: inline;
    padding-right: 5px;
    color: #333;
    list-style: none;
    font-weight: 500;
    font-size: 13px;
}
#contact li a {
    border-bottom: none;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
}
.coach1 li {
    margin: 0px;
    margin-bottom: 3px;
    margin-left: 10px;
    padding: 0px;
    color: #667878;
    list-style-type: none;
    font-weight: 300;
    font-size: 14px;
}

.contact-form input[type=text] {
    float: left;
    width: 200px;
}
.contact-form input[type=email] {
    float: right;
    width: 200px;

}
.contact-form input[type=submit] {
    float: right;
}
.contact-form textarea {
float: left;
    height: 70px;
    margin-bottom: 10px;
    margin-top: 20px;
    width: 100%;
}
/*************************************************************


/*************************************************************
 * FORMS
 *************************************************************/
form label { cursor: pointer }
form textarea,
form input[type=text],
form input[type=password],
form input[type=email] {
    background: #d5d5d5 url('../images/form-bg.png') left top repeat-x;
    border-top: 1px solid transparent;
    border-right: 1px solid #d2d2d2;
    border-bottom: 1px solid transparent;
    border-left: 1px solid #d2d2d2;
    color: #7c7c7c;
    font-family: 'Arial', sans-serif;
    padding: 6px 8px;
    resize: none;
}
form input:focus,
form textarea:focus {
    background: #d5d5d5 none;
    border: 1px solid red;
    outline: none;
}
form input[type=submit] {
    background: #0064C4 url('../images/form-caret.png') right center no-repeat;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: normal;
    padding: 8px 50px;
    text-transform: uppercase;
}

Answer 1

您将block-right div宽度声明为50％。但是textarea宽度溢出了父级。尝试：

.block-right {
    float: right;
    box-sizing: border-box;
    width: 50%;
    overflow:hidden;
}

的 DEMO FIDDLE

Answer 2

使用Firefox，您可以使用DOM检查器调查此类问题。其他浏览器也有类似的工具。

在规则中，您将看到

.contact-form textarea {
    float: left;
    ...
    width: 100%;
}

和

form textarea {
    ...
    padding: 6px 8px;
}

containing block（表格）的宽度为980px的50％，即490px。 textarea的内容width也是490px（100％）宽。但另外，textarea的左侧和右侧有一个8px的填充，导致溢出。

因此，您必须将内容宽度减少到490px - padding

.contact-form textarea {
    float: left;
    ...
    width: 474px;
}

http://jsfiddle.net/GRFX4/3/

或删除填充

.contact-form textarea {
    float: left;
    ...
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

http://jsfiddle.net/GRFX4/4/

无法识别在表单字段中导致额外空间的原因

2 个答案: