Span's all next to each other

What is going on here, I has tried floating the spans to the left, I have tried displaying them inline-block, inline ect... nothing seems to be working, I want any spans in the "filters" div to all go next to each other on a horizontal line!

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;
}

Answers


you have to change your code in the following way,

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

}

then for each span, you have to change left: 0px to the amount you want the filter effect to move from the left side.

.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;
}

I have added position:relative; on filter box,

and position: absolute; and left: 0px;


Change the width from 100% to a larger value (in % or px) and a containing div if you want the user to scroll horizontally through the spans.

SEE JSFIDDLE EXAMPLE

.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>

Edit: Solution

Here is you fiddle working: Working jsFiddle here

Original Answer

Use white-space: nowrap; css for surrounding container. If you want to get rid of autospaces between the spans as well concatenate them with <!-- --> html comments.

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*/
}

Need Your Help

use django to serve downloading big zip file with some data appended

python django nginx mod-wsgi

I have a views snippet like below, which get a zip filename form a request, and I want to append some string sign after the end of zip file