2

我正在尝试自定义 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 的表单，它显示得很好，但是当我应用浮动时，标签贴在右侧并堆叠在一起。我想要做的是将标签放在左边，输入放在右边，这样它们就会在.comment-form 内的同一行上。我究竟做错了什么？

谢谢。

4

0 回答 0