通过CSS

Question

我需要居中对齐菜单类别，这样菜单分类的宽度应为1200px，菜单中的类别项之间应该有间隙（即边距右边），最后一项应该位于屏幕右侧更多角落（即边距右侧：0）。请在下面找到相同的示例代码。

https://jsfiddle.net/es0o324t/1/

HTML：

<div class="navigationbarcollectioncomponent">
    <div id="nav_main">
        <ul>
            <li class="La parent">
                <a href="">Clothing</a>
            </li>
            <li class="La parent">
                <a href="">Denim</a>
            </li>
            <li class="La parent">
                <a href="">Accessories</a>
            <li class="La parent">
                <a href="">Online Exclusives</a>
            </li>
            <li class="La parent">
                <a href="">Sale</a>
            </li>
            <li class="La parent">
                <a href="">Hot offers</a>
            </li>
        </ul>
    </div>
</div>

CSS：

body {
margin:0;
padding:0;
}

ul{
margin-left:0;
}

ul,li{
list-style: none;
padding:0;
}

.navigationbarcollectioncomponent {
width: 1200px;
margin: 0 auto;
}

#nav_main li.La{
float: left;
}

#nav_main li.La > a {
color: #373737;
display: inline-block;
font-family: "Lato-Regular";
font-size: 16px;
line-height: 36px;
margin: 0;
padding: 0px 8px;
text-transform: uppercase;
}

我通过JavaScript实现了这一点，并通过读取菜单中每个类别的宽度，然后根据类别计数计算类别的差距。

但问题是我只需要通过CSS而不是使用JavaScript来实现这一点。 bcoz通过JS计算需要一些时间。

类别数量也是动态的。因此，我无法对每个类别（即li标签）的边距右值进行硬编码。

如果有相同的解决方案，请告诉我。

PFA表示预期结果的快照。

第一类应保持最大对齐，宽度为1200像素，最后一类应与右对齐，而第一类和最后一类的类别应以中心对齐，均匀间距

Answer 1

当您使用CSS3标记此问题时，为什么不使用flex？

将您的容器ul设置为flex，justify-content设置为space-between。

ul { 
    width: 100%; padding: 8px;
    display: flex; 
    justify-content: space-between; 
}

你的小提琴：https://jsfiddle.net/abhitalks/es0o324t/2/

Answer 2

要使您的导航菜单居中，请添加此CSS。

#nav_main{
  margin: 0  auto;
  display: table;
}

Answer 3

检查这个小提琴：jsfiddle.net/shiyaspathiyassery/6jqy6702/1/

您已添加float: left;请删除该内容。

Answer 4

这里足够接近了。运行代码段以查看结果：

尽管最左边和最右边的菜单分别没有粘贴在两侧，因为<li> text-align设置为居中，以便在菜单之间实现均匀的空间。

body {
margin:0;
padding:0;
}

ul{
  display: -webkit-box;
  display: -moz-box;
  display: box;
  width: 100%;
}

ul,li{
list-style: none;
padding:0;
}

.navigationbarcollectioncomponent {
  display: inline-block;
  width: 1200px;
  margin: 0 auto;
}

#nav-main{
  display: inline-block;
  width: 100%;
}

#nav_main li.La{
  text-align: center;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
}

#nav_main li.La > a {
color: #373737;
display: inline-block;
font-family: "Lato-Regular";
font-size: 16px;
line-height: 36px;
margin: 0;
padding: 0px 8px;
text-transform: uppercase;
}

<div class="navigationbarcollectioncomponent">
    <div id="nav_main">
        <ul>
            <li class="La parent">
                <a href="">Clothing</a>
            </li>
            <li class="La parent">
                <a href="">Denim</a>
            </li>
            <li class="La parent">
                <a href="">Accessories</a>
            <li class="La parent">
                <a href="">Online Exclusives</a>
            </li>
            <li class="La parent">
                <a href="">Sale</a>
            </li>
            <li class="La parent">
                <a href="">Hot offers</a>
            </li>
        </ul>
    </div>
</div>

Answer 5

onBindViewHolder可用于实现您的目标。

在table-layout: fixed中，水平布局仅取决于表的宽度和列的宽度，而与单元格的内容无关。 因此每个列的表宽度将相等。

为table-layout: fixed和ul

添加/修改这些css属性

#nav_main li.La

https://jsfiddle.net/f03mqxd7/