Question

我有一个问题。正如您所看到的，上一个<li>元素超出了<div>，我希望<li>元素转到下一列。这可能吗？

这是我的代码。

＆＃13;

.widget-container {
  z-index:9999;
  position:absolute;
  left:17.5%;
  background:white;
  width:65%;
  max-height:310px;
  border:1px solid grey;
}

.widget-container ul{
  display:block;
  list-style:none;
  width:10%;
  float:left;
  height:auto;
  max-height:310px;
}

.widget-container img{
  float:right;
  border:5px solid white;
}

.widget-container a{
  text-decoration:none;
  color:grey;
  padding:5px;
}

＆＃13;

<div id="bijela_tehnika" class="widget-container">
  <ul>
    <a href="#"><li>Hladnjaci i zamrzivaći</li></a>
    <a href="#"><li>Perilica rublja</li></a>
    <a href="#"><li>Perilica suđa</li></a>
    <a href="#"><li>Klima uređaji</li></a>
    <a href="#"><li>Pećnice</li></a>
    <a href="#"><li>Ploće za kuhanje</li></a>
    <a href="#"><li>Uređaji za grijanje</li></a>
    <a href="#"><li>Bojleri</li></a>
  </ul>
  <img src="bijela_tehnika.jpg" width="800px" height="300px" />
</div>

＆＃13;

Answer 1

在您的问题中，您询问了如何使溢出列表元素移动到第二列。简单地修复标记不足以实现这一点（如here所示）。这可以使用column-width和/或column-count css属性来完成。

关于css-tricks的

This article提供了一个易于理解的列属性说明。

Most browsers支持这些属性，但您需要为gecko和webkit浏览器变体使用供应商前缀。 Internet Explorer 9及更低版本根本不支持它。

下面的示例显示了如何指定当元素从其容器垂直溢出时，它应该开始一个150px的新列。

＆＃13;

.container {
    height: 200px;
    border: 1px solid black;
    column-fill: auto;
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-width: 150px;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;
}

＆＃13;

<div class="container">
    <ul>
        <li><a href="#">First Link</a></li>
        <li><a href="#">Second Link</a></li>
        <li><a href="#">Third Link</a></li>
        <li><a href="#">Fourth Link</a></li>
        <li><a href="#">Fifth Link</a></li>
        <li><a href="#">Sixth Link</a></li>
        <li><a href="#">Seventh Link</a></li>
        <li><a href="#">Eighth Link</a></li>
        <li><a href="#">Ninth Link</a></li>
        <li><a href="#">Tenth Link</a></li>
        <li><a href="#">Eleventh Link</a></li>
        <li><a href="#">Twelfth Link</a></li>
        <li><a href="#">Thirteenth Link</a></li>
        <li><a href="#">Fourteenth Link</a></li>
        <li><a href="#">Fifteenth Link</a></li>
        <li><a href="#">Sixteenth Link</a></li>
        <li><a href="#">Seventeenth Link</a></li>
        <li><a href="#">Eighteenth Link</a></li>
        <li><a href="#">Nineteenth Link</a></li>
        <li><a href="#">Twentieth Link</a></li>
    </ul>
</div>

＆＃13;

根据您提供的代码，我认为您应该将column-fill和column-width属性添加到ul元素中。下面是一个更接近复制用例的示例（从您的代码中修改）。

＆＃13;

.widget-container {
    z-index:9999;
    position:absolute;
    left:17.5%;
    background:white;
    width:65%;
    max-height:310px;
    border:1px solid grey;
}
.widget-container ul {
    display:block;
    list-style:none;
    width:10%;
    float:left;
    height:auto;
    max-height:310px;
    column-fill: auto;
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-width: 150px;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;
}
.widget-container li {
    padding: 10px 0;
}
.widget-container img {
    float:right;
    border:5px solid white;
    height: 300px;
    width: 60%;
}
.widget-container a {
    text-decoration:none;
    color:grey;
    padding:5px;
}

＆＃13;

<div id="bijela_tehnika" class="widget-container">
    <ul>
        <li><a href="#">Hladnjaci i zamrzivaći</a></li>
        <li><a href="#">Perilica rublja</a></li>
        <li><a href="#">Perilica suđa</a></li>
        <li><a href="#">Klima uređaji</a></li>
        <li><a href="#">Pećnice</a></li>
        <li><a href="#">Ploće za kuhanje</a></li>
        <li><a href="#">Uređaji za grijanje</a></li>
        <li><a href="#">Bojleri</a></li>
        <li><a href="#">Hladnjaci i zamrzivaći</a></li>
    </ul>
    <img src="http://placehold.it/350x150?text=your+image" />
</div>

＆＃13;

Answer 2

您的HTML无效。请查看http://www.w3.org/TR/html-markup/ul.html#ul-content-model，告诉您ul内允许的唯一内容是li。

然后允许li包含任意流内容：http://www.w3.org/TR/html-markup/li.html

您的代码应如下所示：

<ul>
    <li><a href="#">Hladnjaci i zamrzivaći</a></li>
    <!-- ... -->
</ul>

Answer 3

在周围的容器上使用width: auto，如下所示：

#bijela_tehnika {
    width: auto;
}

Answer 4

问题是您已将li个元素包裹在a个标记中，但有序或无序列表中唯一有效的元素是li。您需要更改代码，使其显示为：

<ul>
    <li><a href="#">Hladnjaci i zamrzivaći</a></li>
    <li><a href="#">Perilica rublja</a></li>
    <li><a href="#">Perilica suđa</a></li>
    <li><a href="#">Klima uređaji</a></li>
    <li><a href="#">Pećnice</a></li>
    <li><a href="#">Ploće za kuhanje</a></li>
    <li><a href="#">Uređaji za grijanje</a></li>
    <li><a href="#">Bojleri</a></li>
</ul>

我猜测你将a标记放在li标记周围的原因是为了让它可以在任何地方点击，而不仅仅是在文本上。要解决此问题，您可以使用CSS将a标记设为块元素。

ul > li > a {display: block}

如何将溢出的列表元素移动到新列？

4 个答案: