Question

我在div中隐藏一个span有一点问题。我已经查看了stackoverflow的相关问题，我得出的结论是要隐藏的元素应该是绝对定位的，并且包含该元素的容器应该相对定位。我已经实现了解决方案，但它仍然无法正常工作。

HTML：

<div class="column1">
    <div class="menuitem">
        <div class="leftmenuitem"><span class="title">MEAT SHAWARMA</span><span class="dots"></span>

        </div>
        <div class="rightmenuitem">$3.99</div>
        <div class="leftmenuitem"><span class="title">CHICKEN SHAWARMA</span><span class="dots"></span>

        </div>
        <div class="rightmenuitem">$3.99</div>
    </div>
    <div class="menuitem">
        <div class="leftmenuitem"><span class="title">SOJUK</span><span class="dots"></span></span>
        </div>
        <div class="rightmenuitem">$4.49</div>
        <div class="leftmenuitem"><span class="title">SAUSAGE</span><span class="dots"></span></span>
        </div>
        <div class="rightmenuitem">$4.49</div>
        <div class="leftmenuitem"><span class="title">BASTERMA</span><span class="dots"></span></span>
        </div>
        <div class="rightmenuitem">$4.49</div>
    </div>
</div>

CSS：

.column1 {

    float:left;

    width:50%;

}

.column2 {

    float:left;

    width:50%;

}

.menuitem {

    margin-bottom:10px;

    margin-top: 30px;

    position:relative;

    overflow:hidden;

}

.leftmenuitem {

    width:90%;

    float:left;

    position: relative;

}

.dots {

    position: absolute;

    bottom: 5px;

    left: 0;

    right: 0;

    z-index: 1;

    margin: 0;

    border: 0;

    height: 3px;

    display: block;

    background-image: radial-gradient(circle closest-side, #b3b3b3 99%, rgba(0, 0, 0, 0) 1%);

    background-position: bottom;

    background-size: 6px 3px;

    background-repeat: repeat-x;

    overflow:hidden;

}

.title {

    position: relative;

    z-index: 5;

}

.rightmenuitem {

    width:10%;

    float:right;

    text-align:right;

    position: relative;

}

JSSFIDDLE：

http://jsfiddle.net/oct9jydv/

Answer 1

我通过将background-color:#fff;添加到.title

来解决这个问题

溢出隐藏不使用相对容器和绝对元素解决方案

1 个答案: