Question

我有以下代码（使用example）：

<div>
  <ul class="data">
    <li>
      <img src="http://placehold.it/800x200">
    </li>
    <li style="display: none;">
      <img src="http://placehold.it/800x200">
    </li>
  </ul>
  <ul class="pipe">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
</div>

我需要将管道列表放在底部和中心但是放在图像上。

数据UL将有幻灯片的图像。

我尝试了以下操作，但我无法使其正常工作：

div {
  border: 1px solid red;
  position: relative;
  text-align: center;  
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.pipe {   
  bottom: 0;  
  margin: 0 auto;
  padding: 0;  
  z-index: 10000;
}

li {
  display: inline-block;
}

a {
  border: 3px solid black;
  border-radius: 16px;
  display: block;
  height: 16px;
  width: 16px;   
}

我做错了什么？

谢谢你，米格尔

Answer 1

在这里你http://codepen.io/anon/pen/GJwag。你需要添加此规则

ul.pipe {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;

}

Answer 2

从position:absolute规则中删除ul。

<强> jsFiddle example

或者，保持位置并将ul设置为宽度为100％。

div中的内部元素和其他内容

2 个答案: