Question

这是我在这个问题上的第二次尝试，我仍然无法提出修复方法。我的问题涉及获取链接列表并将其拆分为列。我运行一个用户有多个用户名的站点，因此动态生成跳转列表。这意味着任何类型的静态解决方案都无法工作。该列表需要能够随内容动态扩展。

    -webkit-column-count:3;
    -moz-column-count:3;
    column-count:3;

折腾它应该解决了我的问题。并且做了，或者我想，我只是在Firefox上搞砸了它，它完全按照我的描绘。然后我收到了Chrome用户的投诉。似乎在chrome中，列拒绝让列表项并排放置，只占用最大的宽度。我不太确定如何更好地解释它，所以我做了jsfiddle来演示。它显示了我制作的原始列表，以及放入column-count属性。

如果你在firefox或opera中查看它，它看起来很好，它的目的是什么，浏览器占用所有三列的大小。在chrome中查看它，您会看到所有三列，但在被拆分为多列之前，它受到列中最大项的长度的限制，可以通过使用检查器来打开和关闭列规则来查看。

所以现在我问，如何让chrome尊重我的列并以正确的方式显示？或者甚至可能。

Answer 1

我能够在ul容器上用宽度修复它，我希望它能帮助你：

.multi ul {
    width:500px;
}

查看您的updated小提琴。你正好使用firefox和opera，而不是chrome，我尝试了其他一些css columns parameters但没有成功。

Answer 2

谢谢大家，我甚至不知道CSS中存在列数属性。学到了新的东西。

但由于IE不支持，我建议另一种解决方案。它使用Twitter Bootstrap，如行/跨度布局样式。如果你包括bootstrap，CSS将变得更加简单。

缺点是它会在每列中从左到右列出项目，而不是从上到下。

jsfiddle

HTML：

<div class="wrapper left">
    <div class="single">
        <ul>
            <li><a href="#">Lorem ipsum</a></li>
            <li><a href="#">dolor sit amet</a></li>
            <li><a href="#">consectetur</a></li>
            <li><a href="#">adipiscing elit</a></li>
            <li><a href="#">sit amet erat</a></li>
            <li><a href="#">congue</a></li>
            <li><a href="#">quis dolor in orci</a></li>
            <li><a href="#">venenatis vel</a></li>
            <li><a href="#">Vivamus</a></li>
        </ul>
    </div>
</div>
<div class="wrapper right">
    <div class="multi">
        <ul>
            <li><a href="#">Lorem ipsum</a></li>
            <li><a href="#">dolor sit amet</a></li>
            <li><a href="#">consectetur</a></li>
            <li><a href="#">adipiscing elit</a></li>
            <li><a href="#">sit amet erat</a></li>
            <li><a href="#">congue</a></li>
            <li><a href="#">quis dolor in orci</a></li>
            <li><a href="#">venenatis vel</a></li>
            <li><a href="#">Vivamus</a></li>
        </ul>
    </div>
</div>

CSS：

.wrapper {
    border-radius:10px;
    overflow:hidden;
}
.single, .multi {
    display:block;
    margin-left:-5px;
}
.single ul {
    width:205px;
}
.multi ul {
    width:615px;    
}
ul {
    background-color:#545454;
    border-radius:10px;
    display:block;
    margin: 0;
    padding:0;
}
ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
li {
    background-color:#CACACA;
    border-radius:10px;
    display:block;
    float:left;
    margin-left:5px;
    padding:5px 10px;
    width:180px;
}
a {
    text-align:left;
    white-space:nowrap;
}
.left {
    left: 10px;
    position: absolute;
    top: 0;
}
.right {
    left: 220px;
    position: absolute;
    top: 0;
}

Answer 3

我设法让它在HTML和其他一些CSS更改中稍作改动

HTML：

<div class="multi">
        <ul>
            <li><a href="#">Lorem ipsum</a></li>
            <li><a href="#">dolor sit amet</a></li>
            <li><a href="#">consectetur</a></li>
            <li><a href="#">adipiscing elit</a></li>
            <li><a href="#">sit amet erat</a></li>
            <li><a href="#">congue</a></li>
            <li><a href="#">quis dolor in orci</a></li>
            <li><a href="#">venenatis vel</a></li>
            <li><a href="#">Vivamus</a></li>
        </ul>
</div>

我认为这是写清单的正确方法。

CSS：

.multi li {
    display: inline-block;
       width:100%;
}
.multi a {
    text-align:left;
    display:block;
    text-align:left;
    padding:5px 10px;
    position:relative;
    white-space:nowrap;
    background-color:#CACACA;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    display: inline-block;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

样本： http://jsfiddle.net/LepMN/2/

列表中使用chrome中的多个列中断

3 个答案: