如何将<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;
}

工作题材:链接.