Chrome中的CSS列垂直对齐 [英] CSS columns vertical alignment in Chrome
问题描述
使用以下代码：
<！DOCTYPE html>
< html>
< body>
< div style = - webkit-column-width：5em; -moz-column-width：5em;>
< ul>
< li>项目< / li>
< li>项目< / li>
< li>项目< / li>
< li>项目< / li>
< li>项目< / li>
< li>项目< / li>
< li>项目< / li>
< li>项目< / li>
< li>项目< / li>
< li>项目< / li>
< / ul>
< / div>
< / body>
< / html>
在Chrome中，我得到了奇怪的行对齐：
行在Firefox中正确对齐。有没有人知道如何解决这个问题？
解决方案我已经通过你的问题，并找到一个解决方案，你为什么得到这个问题chrome。
请将此css添加到ul标记中：
< ul style =margin：0;>
< li>项目< / li>
< li>项目< / li>
< li>项目< / li>
< li>项目< / li>
< li>项目< / li>
< li>项目< / li>
< li>项目< / li>
< li>项目< / li>
< li>项目< / li>
< li>项目< / li>
< / ul>
我希望它能解决您的问题。
在新窗口中打开清晰屏幕
以上是谷歌浏览器（不同窗口大小）不同图片的屏幕截图，您可以看到第一张图片是您的屏幕截图&您在Google Chrome浏览器中输出的代码，其中我添加了三个不同颜色的边框来演示此问题。
$ b $ ol <
After在 ul 上添加 margin：0; ，您可以在不同的视口大小中看到不同的输出。
With the following code:
<!DOCTYPE html>
<html>
<body>
<div style="-webkit-column-width:5em;-moz-column-width:5em;">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
</body>
</html>
In Chrome I get a weird alignment of rows:
The rows align correctly in Firefox. Does anyone know how to fix this?
I have gone through your problem and find a solution why you are getting the problem in chrome.
Please add this css to the ul tag:
<ul style="margin:0;">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
I hope it will solve your problem.
OPEN SCREENSHOT IN NEW WINDOW FOR CLARITY
Above is the screen shot of different images of google chrome (different window sizes), you can see 1st image is your screenshot & the output of you code in google chrome in which i added three different colored borders to demonstrate the problem.
- Border red on div.
- Pink on ul
- Green on li
After adding margin:0; on ul you can see different output in different viewport sizes.
这篇关于Chrome中的CSS列垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
