我如何将这些放在同一行？答案

【问题标题】：How do I put these on the same line?我如何将这些放在同一行？
【发布时间】：2013-02-17 05:12:31
【问题描述】：

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

【问题讨论】：

标签： javascript jquery css

【解决方案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()。

【讨论】：

【解决方案2】：

这是最简单的解决方案：

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

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

【讨论】：

这是不可扩展的，因为这将为跨度内的所有 div 设置样式。
@ATOzTOA 当然我只是基于 OP fiddle，我认为他知道为该跨度放置一个特定的 id 或类以使其独一无二。不过，我认为不值得投反对票

【解决方案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");
});

【讨论】：