1

以下に示すように、選択を 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>
4

1 に答える 1

3

どうしても整列させたい場合は、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;
}

ここでフィドル

于 2013-01-13T05:34:27.553 に答える