显示彼此顶部的列表项目

我的目标是在列表项目中移动，当其他列表项目淡出时，我需要将这三个列表项目显示在同一行上，彼此重叠。应与不同宽度的图像工作，唯一的共同属性可以是顶部位置，相对于DIV它是英寸显示彼此顶部的列表项目

.container { 
    display:table; 
    margin: 0 auto; 
} 

ul { 
    list-style-type:none; 
}

要解释好一点，我需要这些项目，无论是它是文本，图像，不同大小的div，位于屏幕中间，完全居中。

这是可以实现的javascript解决方案，通过测量包含的元素的大小和从图像的左侧减去中间偏移量。

我想实现的是一个仅用于CSS3/HTML5选项的类似效果。

来源

2014-12-20 Jeff Ancel

再次检查我的答案。无论你在列表中的项目将始终居中 –

我更新了两个图像（相同的图像不同大小，它显示我有答案的问题）。 http://plnkr.co/edit/L8tsnopS9QvC4OteyIKQ?p=preview。这些图像的中间点应该处于它们所处的任何元素的中间。例如，小图像的中间部分应该是这个例子中的大图像的中间，而这些是它们唯一共同的东西。 –

检查我在这里做了什么http://jsfiddle.net/nsLq3ooc/1/ –

我希望我能理解你的问题：只需使用绝对位置属性值，将它们堆叠在一起。试试这个：

* { 
 
    margin: 0 auto; 
 
    } 
 

 
.container { 
 
    width: 300px; 
 
    position: relative; 
 
    margin-top: 70px; 
 
    } 
 

 

 
ul { 
 
    list-style-type:none; 
 
} 
 

 
ul li { 
 
    position: absolute; 
 
    height: 25px; 
 
    background-color: red; 
 
    color: white; 
 
    padding: 10px; 
 
    display: block; 
 
    text-align: center; 
 
    width: 100%; 
 
}

<div class="container"> 
 
     <ul> 
 
     <li>One</li> 
 
     <li>Two</li> 
 
     <li>Three</li> 
 
     </ul> 
 
    </div>

注：可以使用的z-index改变元素的堆叠顺序。

来源

2014-12-20 18:47:09

与plunkr类似，我真的希望可变宽度项目在包含div的中心。我更新了一些更具体的指导和javascript变体的解释，我不想使用它。（编辑：增加更多信息） –

好的。一小堆CSS将会做到这一点。使用let属性值来做到这一点。 –

因此，内容div和文本稍微偏离右侧，我真的需要内部内容来动态确定宽度。无论li元素的宽度如何，它都会居中。想象一下你的例子中的第一个元素是最宽的，第二个元素是第二宽的，第三个元素是最宽的。你应该看到外面的一个，外面的两个和全部三个。我会更新并添加图片 –

显示彼此顶部的列表项目

回答

相关问题