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

Positioning li.active to the center of it's parent element, and shifting the remaining items around it

我有一个水平列表,我正在尝试定位它,以便 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>

请注意,我将动态添加项目,所以我将 ul 设置为 direction:rtl;,因此添加新项目时不会影响 transform: translateX 定位.

在这个例子中:http://jsbin.com/fafedowaza/edit?html,css,output - 我将绿色块居中,这样它就会在紫色块下面。

我怎样才能做到这一点?

1。变换:translateX

我将 uldisplay 属性 更改为 inline-block,这样它就可以依赖于它的内容宽度而不是父级的。我还注意到你在写 calc 语句时将绿色块数了两次,将 (150px * 6) 更改为 (150px * 5)。 此解决方案仅在 window(或父级)宽度至少为 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 语句或至少添加另一个 css class 到 ul,这将覆盖旧规则。如果您打算通过 JavaScript add/remove li 元素,您可能也会使用它来固定定位。如果您的项目列表在服务器端是动态的,您可以根据 li 元素的数量为您的 ul 设置 css class。

有一种使元素居中的标准方法,包括将左侧 属性 设置为 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>