如何使表格标签左对齐？

Question

我正在尝试自定义Wordpress主题表单。这是HTML代码：

<form id="commentform" class="comment-form">

  <p class="comment-form-author">
     <label for="author">Name <span class="required">*</span></label>
     <input id="author" name="author" type="text">
  </p>
  <p class="comment-form-email">
     <label for="email">Email <span class="required">*</span></label>
     <input id="email" name="email" type="text">
  </p>
  <p class="comment-form-url">
     <label for="url">Website</label>
     <input id="url" name="url" type="text">
  </p>  
  <p class="comment-form-comment">
     <label for="comment">Comment</label>
     <textarea id="comment" name="comment" cols="45" rows="8">  
     </textarea>
  </p>                                                 
  <p class="form-submit">
     <input name="submit" type="submit" id="submit">
  </p>

</form>

这是我的CSS代码：

#commentform {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  }

.comment-form-author, .comment-form-email, .comment-form-url, .comment-form-comment {
      display: block;
      -webkit-margin-start: 2px;
      -webkit-margin-end: 2px;
      -webkit-padding-before: 0.35em;
      -webkit-padding-start: 0.75em;
      -webkit-padding-end: 0.75em;
      -webkit-padding-after: 0.625em;
       margin: 0 2px;
       padding: 0.2em 0.625em 0.75em;
       }    

#commentform label {
      display: inline-block;
      float: left; 
      width: 20%; 
      }

#commentform input[type="text"], #commentform textarea {
      display: inline-block;
      float: left; 
      width: 65%; 
      padding: 0.6em;
      padding-bottom: 0.1em;
      padding-left: 0.3em; 
      } 

我在另一个具有相同CSS的页面上有另一个表单，它显示正常，但是当我应用float时，标签会粘在右边并堆叠在一起。我要做的是将标签放在左侧，输入放在右边，这样它们就会在.comment-form内的同一行上。我做错了什么？

感谢。