2012-08-08 54 views
0

我有内联元素(复选框和跨度)列和行内元素,垂直对齐错误

对于一些行(李的),我需要两列 我试图用浮动的UL但刹车之间的垂直对齐方式两列 ,但是(!)当我为这个问题创建一个小提琴它与上述技术一起工作! :/

我甚至剪切和粘贴我们网站的完整的风格融入小提琴,但我不能重现该问题

http://jsfiddle.net/Q9g2C/

正如你可以看到BAR1一些信息垂直对齐。

如果我禁用字体大小:0.85em;从它的身体也在我的网站上对齐,如果我使用em或px,如果我在CSS中定义的大小不会对齐,则无关紧要。你们能告诉我什么是错的吗?

编辑:我的问题是,是什么引发的跨度和输入到我的现实世界的网站未对齐(我没能再现上述小提琴的对齐问题)

回答

1

必须只需添加[这是小提琴的normalize.css文件]

input{margin:0; padding:0;} 

的复选框,输入必须有某种抵消正显示出任何东西漂浮在它旁边的。

+0

你不能用div替换标签,那么将不可点击。最常见的问题是为什么它不能在真实网站上正确呈现,我尝试使用相同的文档类型作为小提琴什么也不做。 – Anders 2012-08-08 15:20:47

+0

*如果您想让它可点击,您可以在div内添加标签。在这里,我改变了它。 – 2012-08-08 15:33:09

+0

我的解决方案在小提琴上工作,所以我想知道什么可以在真实网站上搞砸了。 – Anders 2012-08-08 16:17:56

2

它的图像标记它在H1标签的顶部对齐。 我只是删除了标签的“头”的div
Corrected JS Fiddle Link

+0

谢谢,这是公司的标志,但请改为对我的问题发表评论,因为它不回答问题 – Anders 2012-08-08 14:40:08

2

我做了一些编辑您的jsfiddle页面。

http://jsfiddle.net/Q9g2C/4/

我已经学了一招是把一个简单的彩色边框有关的一切,所以你可以看到正在发生的事情。我没有完成所有的事情,但是所有的CSS都是相关的。通过添加一些填充,它有助于在应该去的地方砸东西。边界可以帮助你看到什么被排除在外。

继续玩弄CSS。

+0

虽然看到HaroonAbbasi的回答,但看起来不错。我的回答对于许多事情来说是有益的。记住一个好工具。 – Savanetech 2012-08-08 14:42:03

+0

它建在萤火虫周围的所有元素获得边界 – Anders 2012-08-08 14:56:31

+0

不幸的是一个网站看起来完全不同的浏览器...例如Craptastic IE浏览器。所以,在这些情况下,CSS边界有所帮助。 – Savanetech 2012-08-08 15:01:31