在彼此顶部显示列表项 [英] Display list items on top of each other

问题描述

我的目标是移动列表项，淡出一个作为其他的淡入。我需要所有这三个列表项目显示在同一行，在另一个顶部。如果使用不同宽度的图片，唯一的公共属性可能是顶部位置，相对于它所在的div。

链接

  .container { 
 display：table; 
 margin：0 auto; 
} 
 
 ul {
 list-style-type：none; 
} 
  

为了说明一点，我需要这些项目，无论是文字，图片，不同大小的div在屏幕中间，完全居中。

通过测量所包含元素的大小并从图片左侧减去中间偏移量，可以使用JavaScript解决方案来实现。

$ b

解决方案

我想要实现的是一个CSS3 / HTML5选项。

我希望我理解你的问题：只需使用position属性的绝对值，将它们堆叠在一起。尝试此操作：

  * {margin：0 auto; } .container {width：300px;位置：相对; margin-top：70px; } ul {list-style-type：none;} ul li {position：absolute; height：25px; background-color：red;颜色：白色; padding：10px;显示：block; text-align：center; width：100％;}  

 < div class =容器> < ul> < li>一个< / li> < li>两个< / li> < li>三< / li> < / ul> < / div>  

注意：您可以使用 z-index 来更改元素堆栈的顺序。

I'm aiming to move through list items, fading one out as the other fades in. I need all three of these list items to display on the same line, on top of each other. Should work with images of varying widths, the only common attribute may be the top position, relative to the div it is in.

Link

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

ul {
  list-style-type:none;
}

To explain a little better, I need these items, whether it's text, images, divs of varying sizes to be in the middle of the screen, perfectly centered.

This is achievable with a javascript solution, by measuring the size of the element contained and subtracting the middle offset from the left side of the image.

What I'd like to achieve is a CSS3/HTML5 only option to this similar effect.

解决方案

I hope I understand your question: Simply using position property value of absolute, will stack them on each other. Try this:

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

Note: You can use z-index to alter the order of the stack of the element.

这篇关于在彼此顶部显示列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！