Question

我已经在这个网站上回答了很多问题并且没有任何效果。我有一个容器，我试图在我的小div上允许水平滚动，它不会让我。

CSS

#theLoopTasksLabels {
    width:90%;
    height:90px;
    position:relative;
    margin-top: 60px;
    margin-left:10px;
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    display: inline-block;
    float:left;



}

#categoryTasksLabels {
    height:70px;
    padding:5px;
    margin-left: 10px;
}

#categoryTasksLabels  > h6 {
    padding-top:2px;
    padding-left:10px;
    color:#B6B6B6;
}


#loopsTasksLabels {
    width: 110%;
    height: 90px;
    display: inline-block;
    float:left;



}

#loopsTasksLabels > div {
    display: inline-block;
    float:left;
}

#circleTaskLabels {
    padding:5px;
    border-radius: 3px;
    display: inline-block;
    margin-top:4px;
    color:#fbfbfb;
}

HTML

<div id="theLoopTasksLabels">


        <div id="loopsTasksLabels">

                <div id="categoryTasksLabels">

                    <div id="circleTaskLabels" style="background-color:#eaa5a2">Label</div> <br>
                    <h6><span> 4</span> | <span>6</span></h6>

                </div>

                <div id="categoryTasksLabels">

                    <div id="circleTaskLabels" style="background-color:#eaa5a2">Label</div> <br>
                    <h6><span> 4</span> | <span>6</span></h6>

                </div>

                <div id="categoryTasksLabels">

                    <div id="circleTaskLabels" style="background-color:#eaa5a2">Label</div> <br>
                    <h6><span> 4</span> | <span>6</span></h6>

                </div>

        </div>


</div>

由于我不知情的原因，它无效。我尝试添加其他答案告诉问题的OP的所有内容，但没有。

我只是用作横向滚动，直到我用内容过度填充div的宽度。我尝试滚动的内容是<div id="categoryTasksLabels">用户创建的数量，因此没有设置数字。我不知道还能做什么。

提前谢谢。

Answer 1

首先，您不应该使用ID来设置多个元素的样式，而是使用类。

除此之外，删除＆＃34; float：left＆＃34;来自＆＃34; .loopsTasksLabels＆gt; div＆＃34;似乎让它适合我。

根据内容扩展div的宽度

1 个答案: