Question

这是一个愚蠢的问题，我会给你的。对于我的生活，我无法弄清楚如何对齐文本和我的颜色选择器。如何让所有东西都在一条线上，而不是现在的两条线。见my fiddle。我已经尝试摆脱显示：阻止和清除：两者但这似乎不起作用。这是我的代码：

<!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的小提琴（我不想通过在这里发布所有内容来搞乱一切）

Answer 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时，如果不使用will always be in the second line将i styled it dynamically with use of jQuery和.parent()设为div，请使用{{1}}。

Answer 2

这是最简单的解决方案：

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

演示： http://jsfiddle.net/C7hAY/12/

Answer 3

问题：

创建颜色选择器时，它会将<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>

这就是为什么有一个新行。

解决方案： Live Demo

只需将div的样式设置为display:inline-block;。

代码：

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

    $("#color_picker").parent().css("display", "inline-block");
});

我如何把它们放在同一条线上？

3 个答案:

尝试使用这种方式：http://jsfiddle.net/C7hAY/6/

HTML：

jquery的：