css - inline-block div の配置が機能しない

Question

以下に示すように、選択を 1 つだけ含む div を配置しようとしていますが、機能しません。

vertical-align にどのオプションを選択しても、何も起こりません。以下は、クラス styled-select の div と内部の選択の css です。

div.styled-select {

   width: 100px;
   height: 17px;
   overflow: hidden;
   background: url(../../../../images/downarrow_blue.png) no-repeat right white;   
   display: inline-block;
   position:relative;
   float: left;
   vertical-align: sub
   }

.styled-select select {
   background: transparent; 
   -webkit-appearance: none;
   width: 117px;
   height: 17px;
   border: 0;   
   position: absolute;
   left: 0;
   top: 0;
   }

 // HTML code
 <p/>
 <form action="/prepareUpdateCategoryList.do?forwardto=search">

 <fieldset class="block">

 <label style="width:80px">Class</label>
 <div class="styled-select">
<select>
    <option value="0">Select </option>
    <option value="7382">steam </option>
</select>
</div>

<input type="text" name="fname">
<input type="submit" value="Submit">
</fieldset>
</form>

Answer 1

どうしても整列させたい場合は、margin-topを使用します。

div.styled-select {
    width: 100px;
    height: 17px;
    overflow: hidden;
    background: url(../../../../images/downarrow_blue.png) no-repeat right white;   
    display: inline-block;
    position:relative;
    float: left;
    vertical-align: sub;
    margin-top:5px;
}

ここでフィドル