使 jQuery 下拉框内联显示答案

【问题标题】：Making a jQuery dropdown box display inline使 jQuery 下拉框内联显示
【发布时间】：2012-06-16 03:06:53
【问题描述】：

我正在尝试将此 jQuery 插件用于下拉框。我希望下拉框出现在一些文本的旁边，而不是在它的下方。我试过float 和display 属性，我觉得这很简单，但我就是搞不懂。

演示：http://www.jankoatwarpspeed.com/examples/reinventing-drop-down/

有问题的 CSS 代码：

    .desc { color:#6b6b6b;}
    .desc a {color:#0092dd;}

    .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
    .dropdown dd { position:relative; }
    .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
    .dropdown a:hover { color:#5d4617;}
    .dropdown dt a:hover, .dropdown dt a:focus { color:#5d4617; border: 1px solid #5d4617;}
    .dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px;
                    border:1px solid #d4ca9a; width:150px;}
    .dropdown dt a span {cursor:pointer; display:block; padding:5px;}
    .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
                      left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
    .dropdown span.value { display:none;}
    .dropdown dd ul li a { padding:5px; display:block;}
    .dropdown dd ul li a:hover { background-color:#d0c9af;}

    .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
    .flagvisibility { display:none;}

有什么想法吗？

【问题讨论】：

Johnny，如果任何回复有帮助，您能否选择该回复作为答案？

标签： jquery css layout drop-down-menu

【解决方案1】：

你能告诉我们你尝试了什么吗？首先，格式化你的代码，你可以使用PHP来缩小或者只缩小live版本（保留一个未缩小的版本用于开发）

看看那个链接，我想说你需要在 dl.dropdown 或 .dropdown 上应用浮动/显示，我在你的代码中没有看到......

【讨论】：

【解决方案2】：

是的，在您单击的框上，<dt> 框，使其具有float: left 的样式，同时为包含所有选择的<dd> 提供float: left。

【讨论】：

您不必（或不应该）将“float:left”添加到
刚刚对其进行了测试，将 float: left 添加到 <dt> 会导致布局错误，无法像 OP 想要的那样显示。
我使用的是 firefox 4.0.1，它运行良好。猜测它在其他浏览器/系统中的工作方式不同。
啊，这一切都清楚了，chrome 用户在这里，每个人都有。