3

这是一个愚蠢的问题，我会给你的。对于我的生活，我无法弄清楚如何对齐文本和我的颜色选择器。我如何让所有东西都在一条线上，而不是现在的两条线上。看我的小提琴。我试过摆脱 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 回答