【发布时间】：2018-03-06 11:51:18
【问题描述】：
我有一个使用ul 作为主菜单容器和li 作为菜单列表项的水平菜单导航，我使用ul 的显示表格和li 的表格单元格，所以当每个@987654328 @ 将适合 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>
【问题讨论】：
-
如果您可能注意到，li 之间没有间隙......这是您定义的填充和它们的宽度（为 li 添加背景）
-
@TemaniAfif 但每个单词之间有一个间隙
-
我知道，但这不是 li 元素之间的差距......和它们的背景，你会看到......你在 li 和文本对齐中心上指定了填充，所以差距来自这个
-
@TemaniAfif 但我只定义了顶部和底部的填充
-
li { display:table-cell; text-align:center; padding: 10px 12px; }--> 你有 10px 的顶部/底部和 20px 的左/右...添加一个我告诉你的背景，你会明白 :)