CSS形式 - 輸入寬度不工作

Question

以下CSS：

#contactform { 
    width: 400px; 
    height: 215px; 
} 

.webform { 
} 

.webform input .name { 
    width: 50px; 
} 

.webform input .email { 
    width: 70px; 
} 

.webform input .comments { 
    width: 200px; 
} 

在HTML作爲

<div id="contactform"> 
     <div class="webform"> 
      <input class="name" name="Name" type="text" id="senderName" placeholder="Enter your name here"> 
      <input class="email" name="Email" type="text" id="senderEmail" placeholder="Enter a valid email adress here"> 
      <br> 
      <input class="comments" name="Comments" type="text" id="senderComments" placeholder="Comments..."> 
     </div> 
    </div> 

使用時

產生相同寬度的所有三個輸入字段（50像素=即，寬度的webform input）。我不確定我做錯了什麼。幫幫我？

Answer 1

你的課程在你的input上，而不是input的子元素。所以請將input .name等改爲input.name或.name，重複所有三項。 :)

Answer 2

刪除您的輸入和類名之間的空白

.webform input.name { 
    width: 50px; 
} 

.webform input.email { 
    width: 70px; 
} 

.webform input.comments { 
    width: 200px; 
} 

試試這個fiddle