浮動形式的接觸形式

Question

我發現一個wordpress的contactform插件似乎很容易。它是一個免費的插件，所以我相信作者不會介意發佈他的一些代碼。我試圖將文本區域放在文本字段旁邊。這裏有一些奇怪的事情發生。當我使用負邊距時，藍色框在紅色下方「消失」。

<div id="simple-contact-form"> 

http://jsfiddle.net/bald1/3c7WG/

Answer 1

爲了讓你需要下面的CSS這項工作的跨瀏覽器：

#simple-contact-form .right { 
float: right; 
    width: 50%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

#simple-contact-form .right fieldset { 
    width: 100%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 


fieldset { 
    margin: 0; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

而且你需要包括一個div裏面的三個文本框與一類「權」 ：

<div class="right"> 

     <fieldset class="scf-name"> 
      <label for="scf_name">Name (Required)</label> 
      <input name="scf_name" id="scf_name" type="text" size="33" maxlength="99" value="" placeholder="Your name" /> 
     </fieldset> 
     <fieldset class="scf-email"> 
      <label for="scf_email">Email (Required)</label> 
      <input name="scf_email" id="scf_email" type="text" size="33" maxlength="99" value="" placeholder="Your email" /> 
     </fieldset> 
     <fieldset class="scf-response"> 
      <label for="scf_response">1 + 1 =</label> 
      <input name="scf_response" id="scf_response" type="text" size="33" maxlength="99" value="" placeholder="2" /> 
     </fieldset> 

</div> 

http://jsfiddle.net/3c7WG/8/