logo标签列表

怎样将这些放在同一行？

javascriptjquerycss
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>

请查看我的fiddle，其中包含css和js代码（我不想在此处发布所有内容以避免混乱）。
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 会用 div 包装它，所以如果你不为该 div 设置样式，它 将始终在第二行，而且 我使用 jQuery 动态地设置了它的样式，使用了 .parent()。

0
这种方法不具有可扩展性，因为它会为 span 内的所有 div 设置样式。 - ATOzTOA
1
当然，我只是基于 OP 的代码片段。我认为他知道为那个 span 设置特定的 id 或 class 来使其唯一。虽然我不认为它应该被踩。 - Eli
-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");
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接