Question

我的跨度高度（class =“figure”）未拉伸到列表项的高度100％

HTML

<div class="container">
    <ul>
       <li>
           <span class="stepLabel">Step</span>
           <span class="figure"></span>
           <img src="indent.png" alt="ghost" class="ghost">
       </li>
       <li>
           <span class="stepLabel">Step</span>
           <span class="figure"></span>
           <img src="indent.png" alt="ghost" class="ghost">
       </li>
    </ul>
 </div>

CSS

.container { width: 90%; margin: 10px auto; border: 1px solid #d8d8d8; }
ul { list-style: none; margin: 0; padding: 0; overflow: hidden; }
ul li { display: block; width: 12.1%; height: auto; float: left; margin-left: -1%; }
ul li .stepLabel { display: block; position: absolute; z-index: 999; }
ul li img.ghost { width: 100%; height: auto; position: relative; z-index: 1; opacity: 0.1; }

.figure { display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); }

http://jsfiddle.net/6YsT3/

Answer 1

width / heigh 100％？您可以使用position: absolute和left / right / top / bottom 0 - s

http://jsfiddle.net/6YsT3/5/

不要忘记家长position: relative（li）;

Answer 2

设置父li的高度。

ul li {
    height: 72px;
}

元素的初始高度为auto，因此甚至没有做任何事情。 span元素将自动折叠，因为auto的100%实际上只是0。

Updated jsFiddle example

高度不能伸展到100％

2 个答案: