css - 宽度不从父继承？

Question

我正在尝试叠加图像。我以前做过一点，但出于某种原因，今天我显然忘记了一些东西。它似乎占用了整个页面的宽度而不是其父页面的宽度:

    #work_item {
        position: relative;
        width: auto;
    }

    #work_item img {}

    #work_item a {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 30;
        height: 100%;
        width: 100%;
        background: #000;
        color: #FFF;
           }

            <div id='work_item'>
        <img src="" />
        <a href="#">Click Here!</a>
    </div>

有什么帮助吗？

Answer 1

#work_item {
    display: inline-block;
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 1;
    height: auto;
    width: auto;
}

#work_item img {
    position: relative;
    z-index: 1;
    left: 0px;
    top: 0px;
}

#work_item a {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 30;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.8);
    color: #FFF;
}​

<div id='work_item'> 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfMwj05-cLtN4hGPTSKJcsElDOeNTW65rlmQKXzRo5ZCbFmvuY0dccZMU" /> 
    <a href="#">Click Here!</a> 
</div>

演示: http://jsfiddle.net/38v3h/