CSS:浮动时对齐

发布于 2024-12-25 12:16:32 字数 580 浏览 0 评论 0原文

我有一些页面导航按钮+一个下拉框,我试图并排显示它们,但它们不相互配合。

两个项目都向右浮动。小提琴: 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/

enter image description here

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?

enter image description here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

ゝ偶尔ゞ 2025-01-01 12:16:32

我根本不会为此使用 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/

岁月静好 2025-01-01 12:16:32

我搞乱了一些相对定位,我得到了这个:
http://jsfiddle.net/u9dBm/6/
我添加

 position: relative;
 top: -6px;

到 .dropdown > 的末尾li 使其看起来比预期高 6 像素。我无法告诉你为什么它首先渲染在那里,但我可以给你一个蹩脚的修复。

顺便说一句,我真的很喜欢这个演示。

I messed around with some relative positioning, and I got this:
http://jsfiddle.net/u9dBm/6/
I added

 position: relative;
 top: -6px;

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文