将 li.active 定位到其父元素的中心，并移动其周围的其余项

Question

我有一个水平列表，我正在尝试定位它，以便li.active是父元素的中心。

div {
  display:block;
  width:100%;
  text-align:center;
}
ul {
  transform: translateX( calc(50% - (150px / 2) - (150px * 6)) );
  overflow:hidden;
  white-space:nowrap;
  direction:rtl;
}
li {
  display:inline-block;
  background:blue;
  height:300px;
  width:150px;
}
li.active {
  background:white;
  background:green;
}
span {
  display:block;
  width:150px;
  background: purple;
  height:150px;
  position:absolute;
  top:0;
  left: calc(50% - 75px);
}
* {
  font-size:0;
  padding:0;
  margin:0;
}

<div>
  <ul>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<span></span>

请注意，我将动态添加项目，所以我已经用direction:rtl;设置了ul，所以添加新项目时不会影响transform: translateX的定位。

在本例中：http://jsbin.com/fafedowaza/edit?html，css，output-我要将绿色块居中，这样它就会位于紫色块的下方。

我怎样才能做到这一点？

Answer 1

1。变换：translateX

我将ul的display属性更改为inline-block，这样它就可以依赖于它的内容宽度而不是父内容宽度。我还注意到，在编写calc语句时，您对绿块进行了两次计数，将（150px*6）更改为（150px*5）。只有当窗口（或父窗口）宽度至少为900px（6*150px）时，此解决方案才有效。

div {
  display: inline-block;
  display: block;
  width: 100%;
  text-align: center;
}
ul {
  transform: translateX( calc(50% - (150px / 2) - (150px * 5)));
  overflow: hidden;
  white-space: nowrap;
  direction: rtl;
  display: inline-block;
  overflow: hidden;
}
li {
  display: inline-block;
  background: blue;
  height: 300px;
  width: 150px;
}
li.active {
  background: green;
}
span {
  display: block;
  width: 150px;
  background: purple;
  height: 150px;
  position: absolute;
  top: 0;
  left: calc(50% - 75px);
}
* {
  font-size: 0;
  padding: 0;
  margin: 0;
}

<div>
  <ul>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<span></span>

2.位置：绝对

不管父对象的宽度如何，这个都可以使用。我不知道为什么transform: translateX会这样做，我很少使用它，但看起来position: absolute做到了。

div {
  display: block;
  width: 100%;
  position: relative;
}
ul {
  position: absolute;
  left: calc(50% - (150px / 2) - (150px * 5));
  white-space: nowrap;
  direction: rtl;
  display: inline-block;
}
li {
  display: inline-block;
  background: blue;
  height: 300px;
  width: 150px;
}
li.active {
  background: green;
}
span {
  display: block;
  width: 150px;
  background: purple;
  height: 150px;
  position: absolute;
  top: 0;
  left: calc(50% - 75px);
}
* {
  font-size: 0;
  padding: 0;
  margin: 0;
}

<div>
  <ul>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<span></span>

3.动态添加项目

我不知道你说你可以动态添加项目，这不会影响定位是什么意思，因为你是根据li元素的数量设置calc语句的。这样，当您添加li时，您应该更改calc语句，或者至少向ul添加另一个css类，这将覆盖旧规则。如果您计划通过JavaScript添加/删除li元素，您可能也会使用它来修复定位。如果您的项目列表在服务器端是动态的，那么您可以根据li元素的数量为ul设置一个css类。

Answer 2

有一种标准的居中元素的方法，包括将left属性设置为50%，然后再次转换50%。

在您的情况下，这种技术的变体是有用的，但由于您使用的是rtl方向，它必须更改为使用正确的属性：

增加

  position: absolute;
  right: 50%;
  transform: translateX(75px);

到ul

div {
  display:block;
  width:100%;
  text-align:center;
}
ul {
  overflow:hidden;
  white-space:nowrap;
  direction:rtl;
  /* new style */
  position: absolute;
  right: 50%;
  transform: translateX(75px);
}
li {
  display:inline-block;
  background:blue;
  height:300px;
  width:150px;
}
li.active {
  background:white;
  background:green;
}
span {
  display:block;
  width:150px;
  background: purple;
  height:150px;
  position:absolute;
  top:0;
  left: calc(50% - 75px);
}
* {
  font-size:0;
  padding:0;
  margin:0;
}

<div>
  <ul>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<span></span>