使 jQuery 下拉框内联显示
我正在尝试使用这个 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;}
有什么想法吗？
I'm trying to use this jQuery plugin for a dropdown box. I'd like the dropdown box to appear next to some text, rather than under it. I've tried float and display properties and I feel like it's something really simple, but I just can't get it.
Demo: http://www.jankoatwarpspeed.com/examples/reinventing-drop-down/
CSS code in question:
.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;}
Any ideas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你能告诉我们你尝试过什么吗？首先，格式化您的代码，您可以使用 PHP 缩小或仅缩小实时版本（保留未缩小的版本以供开发）
查看该链接，我想说您需要在 dl.dropdown 或 上应用 float/display 。我在你的代码中没有看到下拉菜单......
Can you show us what you tried? First of all, format your code, you can use PHP to minify or minify only the live version (keep an unminified version for development)
Looking at that link, I'd say you need to apply float/display on dl.dropdown or .dropdown which I don't see in your code...
是的，在您单击的框上，
框，使其具有float: left样式，并给出float: left到包含所有选择的Yeah, on the box that you click on, the
<dt>box, make it have a style offloat: left, also give afloat: leftto the<dd>containing all the selections.