跨度彼此相邻

Question

这里发生了什么，我尝试向左侧移动跨度，我尝试将它们显示为内嵌块，内联等...似乎没有任何工作，我想要在＆＃34;过滤器和＃34; div在水平线上彼此相邻！

HTML：

<div class="filters">
                <span style="background-image:url(images/filters/grayscale.jpg)">Grayscale</span>
                <span style="background-image:url(images/filters/smooth.jpg)">Smooth</span>
                <span style="background-image:url(images/filters/contrast.jpg)">Contrast</span> 
                <span style="background-image:url(images/filters/brightness.jpg)">Brightness</span> 
                <span style="background-image:url(images/filters/colorize.jpg)">Colorize</span>          
            </div>

CSS：

.filters {
    background-color:#1a1a1a;
    height:8em;
    width:100%;
    border-radius:0px 0px 15px 15px;
    overflow:scroll;
}
.filters span {
    margin:10px;
    border-radius:15px;
    background-size:contain;
    background-repeat:no-repeat;
    width:175px;
    height:65px;
    font-size:20px;
    padding-top:2.2em;
    float:left;
}

Answer 1

如果您希望用户水平滚动浏览width s，请将100%从div更改为较大的值（以％或px为单位）和包含span的值.container { width:300px; height:8em; overflow-x:scroll; overflow-y:hidden; } .filters { background-color:#1a1a1a; height:8em; width:1000px; border-radius:0px 0px 15px 15px; } <div class="container"> <div class="filters"> ... </div> </div>

SEE JSFIDDLE EXAMPLE

{{1}}

Answer 2

编辑：解决方案

这是你工作的小提琴：Working jsFiddle here

原始答案

对周围的容器使用white-space: nowrap; css。如果你想摆脱跨度之间的自动空间，并将它们与<!-- --> html注释连接起来。

HTML：

<div class="filters">
        <span>Grayscale</span><!--
     --><span>Smooth</span><!--
     --><span>Contrast</span><!--
     --><span>Brightness</span><!--
     --><span>Colorize</span>
</div>

CSS：

.filters {
    background-color:#1a1a1a;
    height:8em;
    width:100%;
    border-radius:0px 0px 15px 15px;
    overflow:scroll;
    white-space: nowrap; /* added */
}
.filters span {
    margin:10px;
    border-radius:15px;
    background-size:contain;
    background-repeat:no-repeat;
    width:175px;
    height:65px;
    font-size:20px;
    padding-top:2.2em;
    /*float:left; removed*/
}

Answer 3

您必须按以下方式更改代码，

.filters {
    position:relative;
    background-color:#1a1a1a;
    height:8em;
    width:100%;
    border-radius:0px 0px 15px 15px;
    overflow:scroll;

}

然后对于每个范围，您必须将 left：0px 更改为您希望滤镜效果从左侧移动的数量。

.filters span {
    position:absolute;
    left: 0px;
    margin:10px;
    border-radius:15px;
    background-size:contain;
    background-repeat:no-repeat;
    width:175px;
    height:65px;
    font-size:20px;
    padding-top:2.2em;
    float:left;
}

我在过滤器框中添加了 position：relative; ，

和位置：绝对; 和左：0px;