如何将<li>元素保持在固定宽度的单行上？</li>

Question

我正在开发一个网站，我想要一个像上面图片的菜单。这就是我尝试过的：jsFiddle

HTML

         <div class="">
            <ul class="header-menu-ul">
            <li class="header-menu menu-link1-color"><a href="" class="header-menu-link ">ABC's Office</a></li>
            <li class="header-menu menu-link2-color"><a href="" class="header-menu-link ">Benefits</a></li>
            <li class="header-menu menu-link3-color"><a href="" class="header-menu-link ">NEW Brand</a></li>
            <li class="header-menu menu-link4-color"><a href="" class="header-menu-link ">Editorial</a></li>
            <li class="header-menu menu-link5-color"><a href="" class="header-menu-link ">Manger</a></li>
            <li class="header-menu menu-link6-color"><a href="" class="header-menu-link ">Extra</a></li>
            </ul>

            </div>

我面临的问题是它在<li>标签之间占用了一个空格。

Answer 1

我刚刚将列表项浮动到左侧，如下所示：

.header-menu-ul li {
  float: left;
}

工作费用：link。

Answer 2

<强> DEMO

这将创建一个始终单行菜单，使浮动解决方案通常是项目从小尺寸上的位置落下+项目之间没有空格。

<强>代码：

.header-menu-ul{
    display: table;
    width: 100%;
}
.header-menu{
    display: table-cell;
}

Answer 3

我的方法是使用内联块和最小宽度。也可以使用宽度百分比（1oo％/ total_li）。