食品の種類を含む選択ボックスがあります。問題は、それを開こうとすると、Web ページの下部に選択ボックスのスタイルがロードされないことです。私の英語はあまり上手ではないので、スクリーンショットを 2 枚撮りました。
まず、セレクトボックスをクリックしています: http://postimg.org/image/4r5hm13pr/
次に、ページを少し下にスクロールしています: http://postimg.org/image/64x4hc2z3/
ご覧のとおり、見えない別の要素があります。css プロパティが読み込まれませんでした。
ここに私のhtmlコードがあります:
<div class="cont-data clearfix">
//some list elements here
<li>
<div style="float: left;">
<div class='long-select'>
<select class="pyemek" id="pyemek" style='font-size:x-small'>
<option />
<option value="AVML">Asya Vejetaryen</option>
<option value="BBML">Bebek</option>
<option value="DBML">Diabetik</option>
<option value="FPML">Meyve Tabağı</option>
<option value="GFML">Glütensiz</option>
<option value="HFML">Yüksek Fiber</option>
<option value="HNML">Hindu</option>
<option value="KSML">Koşer</option>
<option value="LCML">Düşük Kalori</option>
<option value="LFML">Düşük Yağ / Kolesterol</option>
<option value="LPML">Düşük Protein</option>
<option value="LSML">Düşük Sodyum</option>
<option value="MOML">Müslüman</option>
<option value="NLML">Laktozsuz</option>
<option value="ORML">Oryantal</option>
<option value="RVML">Çiğ Vejetaryen</option>
<option value="SFML">Deniz Besinleri</option>
<option value="SPML">Özel</option>
<option value="VGML">Vejetaryen</option>
<option value="VLML">Vejetaryen Lakto / Ovo</option>
</select>
</div>
</div>
</li>
//some list elements
</div>
これは私の「ロングセレクト」クラスのCSSです:
.long-select { position:relative; width:169px; height:27px; }
.long-select .sbHolder { background:url(../../images/core/long_select.png) no-repeat left top; position:absolute; left:0; top:0; width:169px; height:27px; z-index:1000; }
.long-select .sbHolder .sbSelector { display:block; width:100%; height:100%; font:12px/2em PNSemiBold; color:#FFF; text-indent:5px; }
.long-select .sbHolder .sbOptions { background:#003b75; position:absolute; left:0; top:108% !important; z-index:9999; border-radius:6px; padding:3px 0; }
.long-select .sbHolder .sbOptions li { float:left; display:block; width:100%; height:20px; padding:3px 0; }
.long-select .sbHolder .sbOptions li a { font:13px/1.2em PNSemiBold; color:#FFF; display:block; width:100%; height:100%; text-indent:8px; }
何か案は?
編集:これは、必要になる可能性のある私の別の css です:
#section .flyListData .tableData .cont-data {
background:#f4f4f4;
margin-top:5px;
padding:10px 8px;
border-radius:6px;
}
#section .flyListData .tableData .cont-data li {
float:left;
display:block;
}