2

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

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

扔进去应该可以解决我的问题。确实如此，或者我想，我只是在 Firefox 上弄乱了它，它的表现与我想象的完全一样。然后我收到了 chrome 用户的投诉。似乎在 chrome 中，该列拒绝让列表项并排放置，只取最大的宽度。我不确定如何更好地解释它，所以我做了一个jsfiddle来演示。它显示了我制作的原始列表，以及放置column-count属性。

如果您在 firefox 或 opera 中查看它，它看起来还不错，以及它的预期外观，浏览器会占用所有三列的大小。在 chrome 中查看它，您会看到所有三列，但在拆分为多列之前，它受到列中最大项目的长度的限制，这可以通过使用检查器打开和关闭列规则来查看。

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

4

3 回答 3

1

我能够用 ul 容器上的宽度修复它，我希望它会有所帮助：

.multi ul {
    width:500px;
}

查看您更新的小提琴。你在firefox和opera上是对的，它在工作而不是在chrome上，我尝试了其他一些css列参数但没有成功。

于 2013-03-15T08:05:53.047 回答
1

谢谢大家，我什至不知道 CSS 中存在 column-count 属性。学到了一些新东西。

但由于 IE 不支持它，让我提出一个替代解决方案。它使用 Twitter 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;
}
于 2013-03-15T08:17:03.420 回答
0

我设法让它在 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/

于 2013-03-15T08:49:15.810 回答