列表项的CSS多列布局在Chrome中未正确对齐 [英] CSS multi-column layout of list items doesn't align properly in Chrome
问题描述
我正在建立一个以多列格式呈现给用户的菜单系统。 CSS3中的 column-count 属性获得了90％的效果，但是我在Chrome下的对齐有困难。
菜单相对简单：
- 一个无序列表，通过列数属性 li>
- 列应按顺序填充，因此 column-fill：auto
- 菜单项表示为列表项
- 每个列表项都有一个可点击的锚标签，通过 display：block 完全扩展
我的对齐问题是最明显的顶部边框和一些背景着色每个列表项。在Firefox中，列表项始终在每个列之间对齐，不会泄漏到上一个/下一个列。在Chrome中，对齐是一个crapshoot，有多少列表项目存在和任何填充/ margin属性。
我已经发布一个简单的测试用例的代码在这里： http://pastebin.com/Ede3JwdG
问题应该立即显而易见：在Chrome中，第二列中的第一个列表项会回到第一列。
我已尝试将列表项的填充/边距调整为无avail：Chrome似乎有一个有缺陷的算法，用于如何在多列布局中传输内容。
我没有完全切换列数的主要原因偏好手动生成/ Columnizer /等）是菜单系统还涉及跨多个子菜单的拖放功能，并且将菜单数据布置为基于列表的基于层次的层次结构，从而产生干净的代码。 p>
有没有办法解决Chrome中的对齐问题，还是应该立即放弃列数？
ADDED：
- jsFiddle原型： http://jsfiddle.net/VXsAU/
- JS Bin原型： http://jsbin.com/ebode5/
我也玩过，我在网上看到的几个来源，似乎是一个已知的问题与webkit。有关详细信息，请访问： http://zomigi.com/blog/deal -breaker-problems-with-css3多栏/
有一天，CSS 3！
也许可以尝试使用jQuery插件，如 http://welcome.totheinter.net/columnizer-jquery-plugin/？
I am building a menu system presented to the user in multi-column format. The column-count property in CSS3 gets me 90% of the way there, but I'm having difficulties with alignment under Chrome.
The menu is relatively simple:
- an unordered list divided into multiple-columns by the column-count property
- columns should fill sequentially, so column-fill: auto
- menu items are represented as list items
- each list item has a a clickable anchor tag, extended fully via display: block
The alignment issue I'm having is most noticeable with a top-border and some background coloring on each list item. In Firefox, the list items are always aligned cleanly across each column, never bleeding into the previous/next column. In Chrome, alignment is a crapshoot, varying with how many list items are present and any padding/margin properties.
I've posted the code for a simple test case here: http://pastebin.com/Ede3JwdG
The problem should be immediately evident: in Chrome, the first list item in the second column bleeds back into the first column. As you remove list items (click on them), you can see that alignment breaks down further.
I've tried tweaking the padding/margin for the list items to no avail: Chrome appears to have a flawed algorithm for how it flows content across a multi-column layout.
The primary reason I haven't ditched column-count altogether (in favor of manual generation/Columnizer/etc.) is that the menu system also involves drag-and-drop functionality across multiple sub-menus, and having the menu data laid out as a cohesive list-based hierarchy makes for clean code.
Is there a way to fix the alignment issue in Chrome or should I just give up on column-count for now?
ADDED:
- jsFiddle prototype: http://jsfiddle.net/VXsAU/
- JS Bin prototype: http://jsbin.com/ebode5/
I've played around as well, and several sources I've seen online make it seem to be a known issue with webkit. A good breakdown can be found here: http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/
Someday, CSS 3!
Maybe try a jQuery plugin like http://welcome.totheinter.net/columnizer-jquery-plugin/ ?
这篇关于列表项的CSS多列布局在Chrome中未正确对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
