1

食品の種類を含む選択ボックスがあります。問題は、それを開こうとすると、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;
}
4

0 に答える 0