CSS:浮动时对齐
我有一些页面导航按钮+一个下拉框,我试图并排显示它们,但它们不相互配合。
两个项目都向右浮动。小提琴: http://jsfiddle.net/u9dBm/1/
出了什么问题:
- 红十字是现在正在发生的情况,
- 红十字和绿色勾号应该是这样的,但您会注意到下拉菜单顶部短了一个像素,当它们本身远离页面时,它们的高度相同...
- 绿色勾号应该是这样的
为什么这两个对象在玩弄它们的高度?
与问题无关,但我很好奇......为什么当我将包含下拉菜单的 SPAN
放在第一页之后时,它显示在左侧?从逻辑上讲(或者至少是我的),由于它在代码之后而不是之前,所以它应该在之后显示?
I have some page navigation buttons + a dropdown box that I'm trying to display side-by-side but they are not cooperating with each other.
Both items are to float right. Fiddle: http://jsfiddle.net/u9dBm/1/
What's wrong:
- the red cross is what is happening now
- the red cross and green tick is what should be like but you'll notice that the dropdown is one pixel short on the top when by iteself away from the pages they are the same height...
- green tick is what it should be like
Why are the two object playing silly buggers with their height?
Unrelated to the problem, but something I'm curious about... Why when I put the SPAN
containing the dropdown AFTER the pages one, it displays to the left? Logically (or mine at least), since it is in code AFTER it and not before, it should display afterwards?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我根本不会为此使用
float
。我对您的代码做了一些更改,请告诉我您的想法: http://jsfiddle.net/Wexcode/g2Z5k /I wouldn't use
float
at all for this. I made some changes to your code, let me know what you think: http://jsfiddle.net/Wexcode/g2Z5k/我搞乱了一些相对定位,我得到了这个:
http://jsfiddle.net/u9dBm/6/
我添加
到 .dropdown > 的末尾li 使其看起来比预期高 6 像素。我无法告诉你为什么它首先渲染在那里,但我可以给你一个蹩脚的修复。
顺便说一句,我真的很喜欢这个演示。
I messed around with some relative positioning, and I got this:
http://jsfiddle.net/u9dBm/6/
I added
to the end of .dropdown > li to make it appear 6 pixels higher than it's supposed to. I can't tell you why it was rendering down there in the first place, but I can give you a crappy fix.
BTW, I really liked the demo.