Question

愚蠢的问题，因为我知道我应该知道答案，但我现在无法想到它，所以我需要一些帮助。

我有一个固定宽度和固定高度的div，一切都居中，看起来很花哨。它将成为一个动态计数器，所以我需要它只在列表上显示一个数字。即使我将overflow-y设置为none，列表项也会从父容器溢出。代码如下;有人可以帮我解决我的溢出问题吗？注意：我正在使用bootstrap 3.0

HTML

    <div class='container'>
        <div id='odometer'>
            <div class='col-xs-3 odo'>
            <ul class='odo-number'>
                <?
                    for($i = 0; $i < 10 ; $i++){
                        print "<li>$i</li>";
                    }
                ?>
            </ul>
            </div>
            <div class='col-xs-3 odo'>
            <ul class='odo-number'>
                <?
                    for($i = 0; $i < 10; $i++){
                        print "<li>$i</li>";
                    }
                ?>
            </ul>
            </div>
            <div class='col-xs-3 odo'>
            <ul class='odo-number'>
                <?
                    for($i = 0; $i < 10; $i++){
                        print "<li>$i</li>";
                    }
                ?>
            </ul>
            </div>
            <div class='col-xs-3 odo'>
            <ul class='odo-number'>
                <?
                    for($i = 0; $i < 10; $i++){
                        print "<li>$i</li>";
                    }
                ?>
            </ul>
            </div>
        </div>
    </div>

CSS

#odometer{
    margin: 0 auto !important;
    width: 400px;
    overflow-y: none;
}
#odometer .odo{
    width: 100px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    height: 137px;
    overflow: none;

}
.odo-number{
    float: left;
    list-style: none;
    text-align : center;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;

}
.odo-number:nth-child(-n+1){
    width: 99px;
    border-right: 1px solid #AAAAAA;
}
.odo-number li{
    width: 100%;
    font-size: 96px;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2f2f2f), color-stop(.5, #1e1f1f), color-stop(.51, #0c0c0c), to(#000));
    color: #fff;
}

Answer 1

'none'不是overflow属性的有效值。尝试将其更改为：

overflow-y: hidden;

溢出不包含div内容

1 个答案: