스팬이 모두 옆에 있습니다.

Question

여기에 무슨 일이 일어나고 있습니다, 왼쪽으로 스팬을 시도했는데, 인라인 블록, 인라인 요법을 표시하려고 시도했습니다 ... 아무 것도 작동하지 않는 것 같습니다. 스팬이 필요합니다. "필터"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

변경 (% 또는 PX에서) 더 큰 값으로 100%에서 width 및 div을 포함하는 당신이 원하는 경우 사용자가 span을 가로로 스크롤합니다.

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> 

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; 

} 

, 당신은 을 변경해야 왼쪽 : 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; 
} 

게재 순위 : 상대 : 필터 박스의,

및 위치 : 절대; 및 왼쪽 : 0px;