我有一个水平菜单导航使用ul
作为主菜单容器和li
作为菜单列表项,我使用显示表为ul
和table-cell为li
,所以当每个li
适合ul宽度,问题是之间的差距每个单词菜单项都不一样,原因是因为我在li
元素之间设置填充,但如果我摆脱填充,它将没有任何差距,我需要保持每个单词菜单项之间的差距是即使在li
元素中有单词分隔时也是如此,我需要保持显示的响应性。
css代码:
body{
background-color: #ff2;
margin: 0px !important;
}
ul {
display:table;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background-color: #F25800;
padding: 0 10px;
}
li {
display:table-cell;
text-align:center;
padding: 10px 12px;
}
li:hover{
background-color: #64b448;
}
li a{
text-decoration:none;
}
li a span{
font-size: 13px;
color: #fff;
}
HTML代码:
<ul>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/kebutuhan-rumah.html" class="level-top"><span>Kebutuhan Rumah</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/kebutuhan-pribadi.html" class="level-top"><span>Kebutuhan Pribadi</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/makanan-minuman.html" class="level-top"><span>Makanan & Minuman</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/kebutuhan-kantor.html" class="level-top"><span>Kebutuhan Kantor</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/otomotif.html" class="level-top"><span>Otomotif</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/listrik-teknik.html" class="level-top"><span>Listrik & Teknik</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/alat-bangunan.html" class="level-top"><span>Alat Bangunan</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/elektronik.html" class="level-top"><span>Elektronik</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/pakaian.html" class="level-top"><span>Pakaian</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/pecah-belah.html" class="level-top"><span>Pecah Belah</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/kesehatan.html" class="level-top"><span>Kesehatan</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/mainan-hobi.html" class="level-top"><span>Mainan & Hobi</span></a>
</li>
</ul>
body{
background-color: #ff2;
margin: 0px !important;
}
ul {
display:flex;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background-color: #F25800;
padding: 0 10px;
}
li {
display:inline-flex;
flex-wrap: wrap;
flex: 1;
padding: 10px 12px;
text-align:center;
align-items: center;
padding: 10px 12px;
}
li:hover{
background-color: #64b448;
}
li a{
text-decoration:none;
}
li a span{
font-size: 13px;
color: #fff;
}
<ul>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/kebutuhan-rumah.html" class="level-top"><span>Kebutuhan Rumah</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/kebutuhan-pribadi.html" class="level-top"><span>Kebutuhan Pribadi</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/makanan-minuman.html" class="level-top"><span>Makanan & Minuman</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/kebutuhan-kantor.html" class="level-top"><span>Kebutuhan Kantor</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/otomotif.html" class="level-top"><span>Otomotif</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/listrik-teknik.html" class="level-top"><span>Listrik & Teknik</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/alat-bangunan.html" class="level-top"><span>Alat Bangunan</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/elektronik.html" class="level-top"><span>Elektronik</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/pakaian.html" class="level-top"><span>Pakaian</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/pecah-belah.html" class="level-top"><span>Pecah Belah</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/kesehatan.html" class="level-top"><span>Kesehatan</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/mainan-hobi.html" class="level-top"><span>Mainan & Hobi</span></a>
</li>
</ul>
这是适用的代码。
ul
的显示更改为flex
li
的显示设置为inline-flex
,将其配置为包装,并使用flex: 1
调整大小。使用align-items: center
垂直居中。