时间戳

首页 > 解决方案 > 如何在 IE 的列中显示 ul 列表？

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

问题描述

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

    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。

我能做些什么来解决这个问题？ 在此处输入图像描述

编辑：

谢谢你的帮助。我将其更改为网格布局。这适用于 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)但这也不起作用。

标签： htmlcssinternet-explorer-11css-multicolumn-layout

解决方案

看起来其他浏览器正在调整元素，但 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 代码以在动态添加元素时正确显示它。

推荐阅读