Question

我在三列中有一个无序列表：

    ul#menu-referenzen {
list-style:none;
-moz-column-count: 3;
-moz-column-gap: 50px;
-webkit-column-count: 3;
-webkit-column-gap: 50px;
column-count: 3;
column-gap: 50px;
}
ul#menu-referenzen li { 
    display:block;
    text-align:center;
    border:1px solid #f00; 
    padding: 2% 5% 2% 5%;
    font-weight:600;
    background-color: rgba(255, 255, 255, 0.7);     
    color:#333;
    padding:10px;
    margin-bottom:10px;
}    
    ul#menu-referenzen li.current-cat a { color:#333; background-color:rgba(235, 234, 102, 0.8);    }
    ul#menu-referenzen li.cat-item a:hover {    background-color: rgba(235, 234, 102, 0.8); }

<div class="fullwidth-referenzen">
        <nav class="fullwidth-menu-referenzen">
            <ul id="menu-referenzen" class="fullwidth-menu nav downwards">
                <li class="cat-item cat-item-30"><a href="#" >Büro &amp; Verwaltung</a></li>
                <li class="cat-item cat-item-36"><a href="#" >Gesundheitswesen</a></li>
                <li class="cat-item cat-item-31"><a href="#" >Gewerbe &amp; Industrie</a></li>
                <li class="cat-item cat-item-34"><a href="#" >Pflegeheime</a></li>
                <li class="cat-item cat-item-33"><a href="#" >Schulen &amp; Kitas</a></li>
                <li class="cat-item cat-item-32"><a href="#" >Verkaufsstätten</a></li>
                <li class="cat-item cat-item-35"><a href="#" >Versammlungsstätten</a></li>
                <li class="cat-item cat-item-29"><a href="#" >Wohnen</a></li>
             </ul>
        </nav>
    </div>

当我添加margin-bottom:10px;以便在列表项之间留出一些空间时，它可以在Firefox和Chrome浏览器中使用，但不能在IE11中使用。

该如何解决？ enter image description here

编辑：

感谢您的帮助。我将其更改为网格布局。这适用于Firefox，但不适用于IE。我不知道为什么？！

ul#menu-referenzen {
list-style:none;
display:grid;
-ms-grid-template-rows:50px 50px 50px; 
-ms-grid-template-columns:33% 33% 33%; 
-ms-grid-auto-flow: column; 
-ms-grid-row-gap: 20px; 
-ms-grid-column-gap: 10px;
-ms-align-items:center;

grid-template-rows:50px 50px 50px; 
grid-template-columns:33% 33% 33%; 
grid-auto-flow: column; 
grid-row-gap: 20px; 
grid-column-gap: 10px;
align-items:center;
}

将语法更改为：(display: -ms-grid; and to -ms-grid-rows / -ms-grid-columns)，但这也不起作用。

Answer 1

我尝试将 padding-bottom：1px 添加到ul#menu-referenzen li {}类中。对我来说，不仅适用于chrome和firefox，而且适用于IE。

ul#menu-referenzen li { 
   display:block;
   text-align:center;
   border:1px solid #f00; 
   padding: 2% 5% 2% 5%;
   font-weight:600;
   background-color: rgba(255, 255, 255, 0.7);  
   color:#333;
   padding:10px;
   margin-bottom:10px;
   padding-bottom:1px
}

希望有帮助

Answer 2

我认为，鉴于当前对CSS网格的支持水平，这可能是您最好的选择（请参见https://caniuse.com/#search=grid此处的CSS网格覆盖范围）。为此，IE11需要-ms-前缀。

只需在父元素中使用display：grid以及grid-template-columns。如果需要元素之间的强制间距，则可以在父元素中使用grid-column-gap和grid-row-gap属性。在您的情况下，不需要更改子元素，只需在父元素中定义所需的网格即可。我还建议您使用Firefox开发人员版进行测试，因为它在其开发人员工具中突出显示了网格视图，并且在初次使用CSS网格时会大有帮助。

只需定义将根据子元素的数量和大小分配的列和行。

有关CSS网格的更多信息，请查看https://css-tricks.com/snippets/css/complete-guide-grid。

ul#menu-referenzen {
list-style:none;
display: grid;
grid-template-columns: 3fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
-ms-grid-template-columns: 3fr;
-ms-grid-column-gap: 10px;
-ms-grid-row-gap: 10px;
}

Answer 3

尝试使用此CSS添加li

.li{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
 column-count: 3;

-webkit-column-gap: 10px; /* Chrome, Safari, Opera */
-moz-column-gap: 10px; /* Firefox */
 column-gap: 10px;
 }

Answer 4

就像其他浏览器一样，它们正在调整元素，但IE并非以相同的方式调整元素。

如果可以的话，您可以再添加一个 LI 标签。因此，现在每列都有3个 LI 标签，它将在IE中正常显示。

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<style>
	ul#menu-referenzen {

list-style:none;
-moz-column-count: 3;
-moz-column-gap: 50px;
-webkit-column-count: 3;
-webkit-column-gap: 50px;
column-count: 3;
column-gap: 50px;


}
ul#menu-referenzen li { 
   display:block;
    text-align:center;
    border:1px solid #f00; 
    padding: 2% 5% 2% 5%;
    font-weight:600;
    background-color: rgba(255, 255, 255, 0.7);     
    color:#333;
  
    margin-bottom:10px;
}    
    ul#menu-referenzen li.current-cat a { color:#333; background-color:rgba(235, 234, 102, 0.8);    }
    ul#menu-referenzen li.cat-item a:hover {    background-color: rgba(235, 234, 102, 0.8); }
	</style>
</head>
<body>
<div class="fullwidth-referenzen">
        <nav class="fullwidth-menu-referenzen">
            <ul id="menu-referenzen" class="fullwidth-menu nav downwards">
                <li class="cat-item cat-item-30"><a href="#" >Büro &amp; Verwaltung</a></li>
                <li class="cat-item cat-item-36"><a href="#" >Gesundheitswesen</a></li>
                <li class="cat-item cat-item-31"><a href="#" >Gewerbe &amp; Industrie</a></li>
                <li class="cat-item cat-item-34"><a href="#" >Pflegeheime</a></li>
                <li class="cat-item cat-item-33"><a href="#" >Schulen &amp; Kitas</a></li>
                <li class="cat-item cat-item-32"><a href="#" >Verkaufsstätten</a></li>
                <li class="cat-item cat-item-35"><a href="#" >Versammlungsstätten</a></li>
                <li class="cat-item cat-item-29"><a href="#" >Wohnen</a></li>
		 <li class="cat-item cat-item-29"><a href="#" >Wohnen</a></li>
             </ul>
        </nav>
    </div> 


</body>
</html>

IE 11中的输出：

此外，您可以修改css代码以在动态添加元素时正确显示它。

Answer 5

感谢您的帮助。我将其更改为网格布局。这适用于Firefox，但不适用于IE。我不知道为什么？！

    ul#menu-referenzen {
list-style:none;
display:grid;
-ms-grid-template-rows:50px 50px 50px; 
-ms-grid-template-columns:33% 33% 33%; 
-ms-grid-auto-flow: column; 
-ms-grid-row-gap: 20px; 
-ms-grid-column-gap: 10px;
-ms-align-items:center;

grid-template-rows:50px 50px 50px; 
grid-template-columns:33% 33% 33%; 
grid-auto-flow: column; 
grid-row-gap: 20px; 
grid-column-gap: 10px;
align-items:center;

}

如何在IE中的列中显示ul列表？

5 个答案: