2

私は CSS/HTML (およびこのサイト) を学習するのが初めてで、練習としていくつかの基本的な入力フィールドを設計しようとしています。

私はいくつかのことを設定することができましたが、CSS を使用して入力/選択フィールドの特定の幅を設定するのに本当に苦労しています (px は問題ありませんが、% の方が良いでしょう)。ある種の特異性の問題を推測していますが、それを理解することはできません。助けていただければ幸いです。

<!DOCTYPE html>
<head>
<style type="text/css">
.generalcontainer {
    width:65%;
    margin:5%;
    height:600px;
    float:left;
    background-color: #CCCCCC;
}   
.generalcontainer > span {
    font-family: Calibri;
    font-size: 14px;
    padding: 4px;
}  
.generalcontainer > span.header {
    font-weight: bold;
    color: #fff;
    background-color: blue;
    display: block;
} 
.generalcontainer > span.subheader {
    background-color: gray;
    display: block;
    color: #000000;
    font-weight: bold;
}   
.generalcontainer > span.label {
    color: #000000;
    font-weight: normal;
    display: inline-block;
    width:25%;
}  
.smallentryfield > select input{
    color: #000000;
    font-weight: bold;  
    width: 500px;
    float: left;
    padding: 4px;
}  
</style>
</head>

<body>
<div class="generalcontainer"> 
<span class="header">Basic Information</span> 
<span class="subheader">Client</span> 
<span class="label">First name</span>
  <select class="smallentryfield">
    <option value=""></option>
    <option selected="selected" value="Mr">Mr</option>
    <option value="Mrs">Mrs</option>    
  </select>
  <span class="label">First name</span>
  <input type="text">
  </input>
</div>
</body>
</html>
4

1 に答える 1