0

フォームで現在のuniformjsライブラリとブートストラップを使用しています。ライブラリを使用すると、選択ボックスが素敵なデザインになります。

<div class="control-group">
<label class="control-label">Some Label:</label><div class="controls">
    <select class="uni_style">
        <option>Lorem ipsum dolor sit amet amet, lorem ipsum</option>
        <option>Lorem ipsum dolor sit amet</option>
        <option>Lorem ipsum dolor sit amet</option>
        <option>Lorem ipsum dolor sit amet</option>
        <option>Lorem ipsum dolor sit amet</option>
    </select>
    <img src="../img/bullet_red.png"/>
</div>

現在、私の問題は bullet_red が新しい行にレンダリングされることですが、同じ行に箇条書きを入れたいです。

数回試した後、助けが必要です。私は試した：

  • 画像のインライン表示
  • div.uni-selector のスタイルを変更する
  • div.uni-selector スパンのスタイルを変更する

問題の解決策を持っている人はいますか?

ここに画像の説明を入力

4

2 に答える 2

0

You can wrap the select and the img element in a div and float both elements to the left like in this example:

<div class="control-group">
<label class="control-label">Some Label:</label><div class="controls">
    <div>
        <select style='float:left;' class="uni_style">
            <option>Lorem ipsum dolor sit amet amet, lorem ipsum</option>
            <option>Lorem ipsum dolor sit amet</option>
            <option>Lorem ipsum dolor sit amet</option>
            <option>Lorem ipsum dolor sit amet</option>
            <option>Lorem ipsum dolor sit amet</option>
        </select>
        <img style='float:left;'src="../img/bullet_red.png"/>
    </div>
</div>

http://jsfiddle.net/mpHug/2/

于 2013-02-12T10:27:11.177 に答える
0

別のソースから解決策を入手しました：

私はこのスタイルが必要です:

div.reqselect {display:inline-block; vertical-align:middle; margin-bottom: 0;}

そして、クラスと元のクラスを均一な初期化に追加する必要があります

$(".uni_style").uniform({
selectClass: 'uni-selector reqselect',});
于 2013-02-13T08:17:01.727 に答える