CSSフォーム - マージン/パディング - コードと画像が含まれています

Question

私はhtml/css連絡フォームに問題があります。理想的には、ラベルと定義されたエンドポイント（定義されていない幅）まで1pxのボーダーボトムが延びるように、 'label'と 'input'を互いに水平にしたいと思います。これは可能ですか？私は何が欠けていますか？

<div id="contact"> 
     <div id="invite"> 
      <h1>Let's Talk.</h1> 
      <h2 class="postinfo"> 
       <p>Have you got a project needing an eye for detail and a creative touch? <br>I&#39;d love to hear from you. </p> 
      </h2> 
     </div><!-- end invite --> 
     <form action="#" method="post"> 
      <fieldset> 
       <label for="name"><h1>Name:</h1></label> 
       <input type="text" id="name" placeholder="" /> 

       <label for="email"><h1>Email:</h1></label> 
       <input type="text" id="email" placeholder="" /> 

       <label for="subject"><h1>Subject:</h1></label> 
       <input type="subject" id="subject" placeholder="" /> 

       <label for="message"><h1>Message:</h1></label> 
       <textarea id="message" placeholder=""></textarea> 

       <input type="submit" value="Send" /> 
      </fieldset><!-- end fieldset --> 
     </form><!-- end form --> 
    </div><!-- end contact --> 

#contact { 
    float: left; 
    margin-left: 300px; 
    margin-top: 310px; 
    width: 533px; 
} 
#invite .postinfo { 
    list-style-type: none; 
    margin-left: ; 
    width: 150px; 
} 
#form { 
    float: right; 
    margin-top: -85px; 
    margin-left: 230px; 
} 
#form fieldset { 
    border-style: none; 
    margin-left: -50px; 
    margin-top: -25px; 
} 
#form fieldset label { 
    padding-right: 50px; 
} 
#form fieldset input { 
    width: 300px; 
} 

http://i.stack.imgur.com/B6wF8.png

Answer 1

私はあなたのコードで周りのビットを果たし、これは私が思い付いたものです：あなたのHTMLです。ここ

：

<contact> 
<form action="#" method="post"> 
     <fieldset> 
      <div class="clear"> 
      <label for="name"><h1>Name:</h1></label> 
      <input type="text" id="name" placeholder="" /> 
      </div> 

      <div class="clear"> 
      <label for="email"><h1>Email:</h1></label> 
      <input type="text" id="email" placeholder="" /> 
      </div> 

      <div class="clear"> 
      <label for="subject"><h1>Subject:</h1></label> 
      <input type="subject" id="subject" placeholder="" /> 
      </div> 

      <div class="clear"> 
      <label for="message"><h1>Message:</h1></label> 
      <textarea id="message" placeholder=""></textarea> 
      </div> 

      <div class="clear"> 
      <input type="submit" value="Send" /> 
      </div> 
     </fieldset><!-- end fieldset --> 
    </form><!-- end form --> 
</contact><!-- end contact --> 

、ここではあなたのCSSです：

body { font-family:arial,helvetica,sans-serif ; 
    font-size:14px ; 
    font-weight:bold ; 
} 

h1 { font-size:16px ; 
    margin:0 ; 
    padding:0 ; 
} 

contact { 
    float: left; 
    margin-left: 300px; 
    margin-top: 310px; 
    width: 533px; 
} 
contact invite .postinfo { 
    list-style-type: none; 
    margin-left: ; 
    width: 150px; 
} 

contact form { 
    float: right; 
    margin-top: -85px; 
    margin-left: 230px; 
} 

contact form fieldset { 
    border-style: none; 
    margin-left: -50px; 
    margin-top: -25px; 
} 

contact form fieldset label { width:100px ; 
    float:left } 

contact form fieldset input { 
    width: 200px; 
    float:right ; 
} 

.clear { clear:both ; 
    line-height:30px ; 
} 

あなたが使用するフォントサイズに応じて、ラベルと入力幅で遊ぶ必要があります。

ベスト、

シンシア