CSSクラスだけが動作しません。他のCSSはすべて正常に動作しています。

Question

現在、私はWeb開発プロジェクトを進めています。

問題は他のすべてのCSSが正常に動作していますが、フォームのCSSクラスが正しく動作しないことです。私は何をすべきか分かりません。

.actLeadClaims form { 
 
    margin:40px 25px; 
 
    padding: 10px 20px; 
 
    background: #f4f7f8; 
 
    border-radius: 8px; 
 
    width:465px; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
} 
 

 
.actLeadClaims h1 { 
 
    margin: 0 0 30px 0; 
 
    text-align: center; 
 
} 
 

 
.actLeadClaims input[type="text"], 
 
.actLeadClaims input[type="password"], 
 
.actLeadClaims input[type="date"], 
 
.actLeadClaims input[type="datetime"], 
 
.actLeadClaims input[type="email"], 
 
.actLeadClaims input[type="number"], 
 
.actLeadClaims input[type="search"], 
 
.actLeadClaims input[type="tel"], 
 
.actLeadClaims input[type="time"], 
 
.actLeadClaims input[type="url"], 
 
.actLeadClaims textarea, 
 
.actLeadClaims select { 
 
    background: rgba(255,255,255,0.1); 
 
    border: none; 
 
    font-size: 16px; 
 
    height: auto; 
 
    margin: 0; 
 
    outline: 0; 
 
    padding: 15px; 
 
    width: 400px; 
 
    background-color: #e8eeef; 
 
    color: black; 
 
    box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset; 
 
    margin-bottom: 30px; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
} 
 

 
.actLeadClaims input[type="radio"], 
 
.actLeadClaims input[type="checkbox"] { 
 
    margin: 0 4px 8px 0; 
 
} 
 

 
.actLeadClaims select { 
 
    padding: 6px; 
 
    height: 32px; 
 
    border-radius: 2px; 
 
} 
 

 
.actLeadClaims button { 
 
    padding: 19px 39px 18px 39px; 
 
    color: #FFF; 
 
    background-color: #4bc970; 
 
    font-size: 18px; 
 
    text-align: center; 
 
    font-style: normal; 
 
    border-radius: 5px; 
 
    width: 100%; 
 
    border: 1px solid #3ac162; 
 
    border-width: 1px 1px 3px; 
 
    box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset; 
 
    margin-bottom: 10px; 
 
} 
 

 
.actLeadClaims fieldset { 
 
    margin-bottom: 30px; 
 
    border: none; 
 
} 
 

 
.actLeadClaims legend { 
 
    font-size: 1.4em; 
 
    margin-bottom: 10px; 
 
} 
 

 
.actLeadClaims label { 
 
    display: block; 
 
    margin-bottom: 8px; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
} 
 

 
.actLeadClaims label.light { 
 
    font-weight: 300; 
 
    display: inline; 
 
} 
 

 
.actLeadClaims .number { 
 
    background-color: #5fcf80; 
 
    color: #fff; 
 
    height: 30px; 
 
    width: 30px; 
 
    display: inline-block; 
 
    font-size: 0.8em; 
 
    margin-right: 4px; 
 
    line-height: 30px; 
 
    text-align: center; 
 
    text-shadow: 0 1px 0 rgba(255,255,255,0.2); 
 
    border-radius: 100%; 
 
}

<div class="actLeadClaims"> 
 
    <form action="" method="post" enctype="multipart/form-data"> 
 
    <fieldset> 
 
     <label>Product Name:</label> 
 
     <input type="text" name="productName"> 
 
     <label>Product Brand:</label> 
 
     <input type="text" name="productBrand"> 
 
     <label>Product Series:</label> 
 
     <input type="text" name="productSeries"> 
 
     <label>Comment:</label> 
 
     <textarea rows="6" name="productDesciption"></textarea> 
 
     <label>Picture:</label> 
 
     <input type="file" name="coverToUpload" id="coverToUpload"></br></br> 
 
    </fieldset> 
 
<input type="submit" value="Add" name="uploadProduct"> 
 
</form> 
 
</div>

しかし、これらすべてのコードは次のようになり終わる：まず

Answer 1

を、あなたは間違った方法でBRタグを使用しました。 BRは<br>または<br />は</br>ではありません。

その後、あなたは何が問題なのかを指定しなかったが、それはラベルを定期的に見つけてフォームを見栄え良くすることだと思う。そうであれば、以下の解決策を試してみてください。まず、あなたの正しいBRタグ：

<div class="actLeadClaims"> 
    <form action="" method="post" enctype="multipart/form-data"> 
    <fieldset> 
     <label>Product Name:</label> 
     <input type="text" name="productName"> 
     <label>Product Brand:</label> 
     <input type="text" name="productBrand"> 
     <div class="clear"></div> 
     <label>Product Series:</label> 
     <input type="text" name="productSeries"> 
     <label>Comment:</label> 
     <textarea rows="6" name="productDesciption"></textarea> 
     <div class="clear"></div> 
     <label>Picture:</label> 
     <input type="file" name="coverToUpload" id="coverToUpload"><br><br> 
    </fieldset> 
<input type="submit" value="Add" name="uploadProduct"> 
</form> 
</div> 

そして、CSSコードを変更/この方法を追加します。

.actLeadClaims input[type="radio"], 
.actLeadClaims input[type="checkbox"] { 
    margin: 0 4px 8px 0; 
} 

.actLeadClaims select { 
    padding: 6px; 
    height: 32px; 
    border-radius: 2px; 
} 

.actLeadClaims button { 
    padding: 19px 39px 18px 39px; 
    color: #FFF; 
    background-color: #4bc970; 
    font-size: 18px; 
    text-align: center; 
    font-style: normal; 
    border-radius: 5px; 
    width: 100%; 
    border: 1px solid #3ac162; 
    border-width: 1px 1px 3px; 
    box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset; 
    margin-bottom: 10px; 
} 

.actLeadClaims fieldset { 
    margin-bottom: 30px; 
    border: none; 
} 

.actLeadClaims legend { 
    font-size: 1.4em; 
    margin-bottom: 10px; 
} 

.actLeadClaims label { 
    margin-bottom: 8px; 
    font-family: 'Helvetica Neue', sans-serif; 
} 

.actLeadClaims label.light { 
    font-weight: 300; 
    display: inline; 
} 

.actLeadClaims .number { 
    background-color: #5fcf80; 
    color: #fff; 
    height: 30px; 
    width: 30px; 
    display: inline-block; 
    font-size: 0.8em; 
    margin-right: 4px; 
    line-height: 30px; 
    text-align: center; 
    text-shadow: 0 1px 0 rgba(255,255,255,0.2); 
    border-radius: 100%; 
} 
input, 
textarea { 
    vertical-align: top; 
} 
label { 
    display: inline-block; 
    width: 130px; 
    text-align: right; 
    vertical-align: top; 
} 
.clear { 
    clear: both; 
} 

はjsFiddleのフォームを見てみましょう。出力部を広げて見てください。