css - 将特定列表项居中

Question

我有一个水平列表，每个元素都具有相同的宽度。我正在使用 direction: rtl; 让容器元素从右向左移动。

我希望中间(第二个)元素位于页面的中心。当组合的 LI 的宽度超过用户屏幕宽度时，我的问题是它没有正确对齐。例如http://jsbin.com/vijedisito/edit?css,output (切换 CSS 选项卡)。

所以简而言之，我想让橙色 block 与紫色 block 对齐，但是当用户屏幕宽度太小时这会失败。

有更好的方法吗？

* {
  padding:0;
  margin:0;
}

div {
  box-sizing: border-box;
  overflow: hidden;
  direction: rtl;
  font-size:0;
  text-align: center;
  background:black;
 }
ul {
  transition: transform .25s ease-in-out;
  white-space: nowrap;
  display:block;
  background:black;
}
li {
  display: inline-block;
  box-sizing: border-box;
  min-height: 500px;
  vertical-align: top;
  width: 500px;
}

li:nth-of-type(1) {
  background: red;
}
li:nth-of-type(2) {
  background: orange;
}
li:nth-of-type(3) {
  background: yellow;
}

.test {
  position:absolute;
  top:0;
  display:block;
  width:100%;
}
.test > span {
  display:block;
  width:500px;
  background: purple;
  height:200px;
  margin:0 auto;
}

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

Answer 1

将 LI 的宽度规则更改为:33.33% 而不是 500px。

这是一个例子:

http://codepen.io/nathanfelix/pen/GZQoNQ

我想这就是你的意思吧？