html - 表单容器中的对齐问题

Question

你知道为什么我的红色警报消息被分成两 block 吗？我希望它是主消息字段下的一个 block 。参见 http://jsfiddle.net/z4Lg4/非常感谢

HTML

<div id="contactwrapper">
<div class="block clear">
<div class="block-left">
<h1>Nous contacter</h1>
<div id="addressbox">
<h3>CENTRE DE dfd</h3>
      <p>3, rdsfr</p>
      <p> L5341 dfsf (Luxembourg)</p>
            <ul id="contact">
          <li><i class="icon-phone-sign blue"></i> +352 691 123.456</li>
          <li><i class="icon-envelope blue"> </i><a href="javascript:sendAnnotatedMailTo('contact','dfs','lu','Contact via blondiau.lu','')">contact@dfdsf.lu</a></li>
          <li><i class="icon-map-marker blue"></i><a href="http://goo.gl/maps/w2" target="_blank"> Plan d'accès</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">Votre message a bien été envoyé! Merci</p>
  <p class="error" style="display:none;">E-mail not valid 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%;
    overflow: hidden;
}
.block {

    display: block;
        margin-right: auto;
    margin-left: auto;
    clear: both;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    overflow: hidden;
}

.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;
}


.success
{
  display:none;
      display: block;
margin: auto;
    width: 100%;
    overflow: hidden;
   text-align:center;
   font-size: 14px;
   font-weight: 600;
   color: #fff;
   letter-spacing: 1px;
   padding-top: 3px;
      padding-bottom: 3px;
      background: #99CB97;

}

.error
{
  display:none;
      display: block;
background:#EF6666;
display:inline;
padding: 3px 10px 3px 10px;
top: 10px;


}

Answer 1

检查 js fiddle

http://jsfiddle.net/z4Lg4/

.error
{
      display:none;
      display: block;
      background:#EF6666;
      display:inline;
      top: 72px;
      position:absolute;
}