logo标签列表

在水平菜单中，li元素以相同的间距填充ul宽度

htmlcss
4
我有一个水平的菜单导航，使用ul作为主菜单容器和li作为菜单列表项，我使用display:table为ul和display:table-cell为li，因此当每个li适合于ul的宽度时，问题是每个单词菜单项之间的间隙不同，原因是因为我在li元素之间设置了填充，但如果我去掉填充，就没有任何间隙了，我需要保持每个单词菜单项之间的间隙相同，即使在li元素内部发生换行，我还需要保持显示的响应性。

enter image description here

演示

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>
@TemaniAfif 但我只定义了顶部和底部的填充。 - simple guy
li { display: table-cell; text-align: center; padding: 10px 12px; }你有10像素的顶部/底部间距和20像素的左/右间距...按照我告诉你的添加一个背景，你就会明白 :) - Temani Afif
你能给我展示一下CSS中的顶级类吗？ - Elydasian
@TemaniAfif 噢，是的，我的错，抱歉，但如果我去掉右边和左边的填充就不会有间隙了。 - simple guy
是的，因为这就是表格的工作方式，也是我一开始试图解释的内容 :) 你没有间隙..你看到的都是li内部的样式...填充、文本居中和元素宽度。 - Temani Afif
显示剩余9条评论
1个回答
0

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>

这是适用的代码。

  1. 将 ul 的显示方式更改为 flex
  2. 将 li 的显示方式设置为 inline-flex，配置其自动换行，并使用 flex: 1 调整大小。使用 align-items: center 将其垂直居中。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接