表单容器中的对齐问题

您是否知道为什么我的红色警报消息被拆分为2个块？我希望它是主消息字段下的一个块。见http://jsfiddle.net/z4Lg4/ 非常感谢表单容器中的对齐问题

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 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','')">[email protected]</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; 


}

来源

2013-09-30 Greg

鬼 - 此工作正常的小提琴 - 你设法解决这个问题？ –

不，尚未修正。似乎出现在大屏幕上，至少在safari最新版本 – Greg

检查JS小提琴

http://jsfiddle.net/z4Lg4/

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

来源

2013-09-30 10:14:21

所做的更改：

CSS：

.error 
{ 
     display:none; 
     display: block; 
     background:#EF6666; 
     display:inline; 
     top: 100px; 
     margin-left:35px; 
     position:absolute; 
}

Fiddle

来源

2013-09-30 10:40:31

表单容器中的对齐问题

回答

相关问题