Question

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

我想要它，所以中间（第二）项目位于页面的中心。我的问题是当组合LI的宽度超过用户屏幕宽度时，它没有正确对齐。例如http://jsbin.com/vijedisito/edit?css,output（切换CSS标签）。

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

有更好的方法吗？

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 1

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

以下是一个例子：

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

我认为这就是你的意思？

Answer 2

window / html的宽度可以小于ul宽度。为避免这种情况，您可以重置html上的显示以允许它比窗口更宽，然后使用coordonates来设置绝对元素的位置：

/* CSS UPDATE */

html {
  display: table;
  width: 100%;
  position: relative;
}
.test {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
}
/* END UPDATE */

.test > span {
  display: block;
  width: 500px;
  background: purple;
  height: 200px;
  margin: 0 auto;
}
* {
  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;
}

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

为了保持一个随机li 来自流量中的随机数但在中间，我不认为CSS会有所帮助你在这里。至少，我似乎不清楚你真正想要的是什么，你有什么例子可以解决问题吗？

居中特定列表项

2 个答案: