3

ばかげた質問ですが、教えてください。私の人生では、テキストとカラーピッカーを揃える方法がわかりません。現在の 2 行ではなく、すべてを 1 行にするにはどうすればよいですか。私のフィドルを参照してください。display:block と clear:both を取り除こうとしましたが、うまくいかなかったようです。これが私のコードです：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.8.1.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

<link href="http://evoluteur.github.com/colorpicker/css/evol.colorpicker.css" rel="stylesheet" /> 
<script src="http://evoluteur.github.com/colorpicker/js/evol.colorpicker.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $("#color_picker").colorpicker();
});

</script>
</head>
<body>
    <span>Select a color: <input id="color_picker" value="#92cddc"/></span>
</body>
</html>

css と js のフィドルを参照してください (ここにすべてを投稿してすべてを混乱させたくありません)。

4

3 に答える 3

1

この方法を使用してみてください：http：//jsfiddle.net/C7hAY/6/

html：

<span style='display:block; width:320px;'>
  Select a color: <input id="color_picker" value="#92cddc"/>
</span>

jquery：

$(document).ready(function(){
    $("#color_picker").colorpicker();
    $("#color_picker").parent().css('float','right');
});

私はあなたがそれをすることをお勧めしますがcss。

そこで何が起こった：

カラーピッカーを入力要素にバインドする場合、jQuery wraps it with divそのdivをスタイル設定しない場合はwill always be in the second line、i styled it dynamically with use of jQueryを使用し.parent()ます。

于 2013-02-17T05:20:06.563 に答える
0

最も簡単な解決策は次のとおりです。

$("span > div").css("display","inline-block");

デモ: http://jsfiddle.net/C7hAY/12/

于 2013-02-17T05:25:40.637 に答える
-1

問題：

カラー ピッカーを作成すると、<input>要素が 内にラップされますdiv。生成されたコードは次のようになります。

<span>Select a color: 
    <div style="width:181px;">
        <input id="color_picker" value="#92cddc" class="colorPicker evo-cp0">
        <div class="evo-colorind" style="background-color:#92cddc"></div>
    </div>
</span>

そのため、そこに改行があります。

ソリューション: ライブデモ

のスタイルを に設定するだけdivですdisplay:inline-block;。

コード：

$(document).ready(function(){
    $("#color_picker").colorpicker();

    $("#color_picker").parent().css("display", "inline-block");
});
于 2013-02-17T05:26:47.080 に答える