가로 스크롤로 요소를 만드는 올바른 방법

스쿠터 돼지

바이올린 : http://jsfiddle.net/WsYw8/

내가 말하는 것에 대한 데모 : http://netkoder.dk/test/test0251.html

HTML

<div class="spotlysholderholder baggrundlinear1 bordertype1 borderradius5px">

   <div class="spotlysholderholderb" style="width: 3200px;">
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <div class="clearboth"></div>
   </div>

</div>

CSS

  .spotlysholderholder {
      overflow-x: auto;
   }

   .spotlysholderholderb {
      padding: 4px;
      margin: 0 auto;
   /*   width: 800px;*/
   }

   .spotlysholderholderb a,
   .spotlysholderholderb a:visited,
   .spotlysholderholderb a:active {
      color: #222;
   }

   .spotlysholder {
      text-align: center;
      width: 180px;
      float: left;
      margin: 4px;
      padding: 5px;
      text-decoration: none;

      /* for at undgå at langeordudenmellem ikke går ud over kanten */
      overflow: hidden;
      text-overflow: ellipsis;
   }

   .spotlysholder:hover {
      background: #ccc;
      text-decoration: underline;
      border-color: black;
   }

   .spotlyoverskrift {
      display: block;
      font-weight: bold;
      color: maroon;
   }

   .spotlysbillede {
      margin: 5px auto;
      vertical-align: bottom;
   }

   .baggrundlinear1 {
      background-color: #445263; /* fallback */
      box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.4), inset -2px 0 2px rgba(0, 0, 0, 0.2), inset 0 -2px 2px rgba(0, 0, 0, 0.2), inset 2px 0 2px rgba(255, 255, 255, 0.4);
   }


   .bordertype1 {
      border: 1px solid #7c7c7c; /* fallback farve når rgba ikke virker */
      border: 1px solid rgba(0,0,0,0.5);
      border: 1px solid rgba(0,0,0,0.25);
   }

   .background_color_2 {
      background-color: #ddd; /* fallback */
   }

   .borderradius5px {
      border-radius: 5px;
   }

   .spotlysbillede {
      margin: 5px auto;
      vertical-align: bottom;
   }

   .clearboth {
      clear: both;
   }

16 개의 상자가있는 스크롤 요소가 있습니다.

각 상자의 너비는 패딩을 포함하여 200 픽셀입니다.

그것들을 모두 같은 줄에 얻기 위해 부모 컨테이너 elemenet 16 * 200 픽셀 너비를 만듭니다. 16 개의 상자가 있으면 너비를 3200px로 만듭니다.

두 가지 문제가 있습니다.

1 : 부모 컨테이너 요소의 너비를 설정하지 않고 모든 상자를 같은 줄에 유지하려면 어떻게해야합니까?

2 : 브라우저를 사용하여 축소하면 마지막 상자가 2 줄로 아래로 점프합니다.

insertusernamehere

전체 너비에 대한 지식없이 모든 상자를 정렬하는 가장 간단한 솔루션 부동 요소 display: inline-block대신와 함께 white-space: nowrap;사용 하는 것입니다 . 확대 / 축소하는 동안 깨지지 않습니다. -element를 사용하는 것은 단지 예일뿐입니다. 페이지의 일부만 가로로 스크롤 할 수 있어야하는 경우 동일한 스타일이 적용된 (예제에 충실하기 위해)와 같은 래퍼를 사용할 수도 있습니다 .<body><div class="spotlysholderholderb">

HTML

<div>
    <img src="http://placehold.it/200x100" alt="">
    <p>Box 1</p>
</div>

<div>
    <img src="http://placehold.it/200x100" alt="">
    <p>Box 2</p>
</div>

CSS

body {
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
}

div {
    display: inline-block;
    width: 200px;
    font-size: 14px;
    line-height: 20px;
}

데모

구매하기 전에 시도

이전 시도 (가로 중앙)

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

jQuery로 새 요소를 만드는 올바른 방법은 무엇입니까?

분류에서Dev

Vuetify 앱 바를 가로로 스크롤 가능하게 만드는 방법

분류에서Dev

다른 요소를 가리킬 때 div를 위로 스크롤하는 방법

분류에서Dev

VueJs-입력 필드로 자식 구성 요소를 만드는 올바른 방법은 무엇입니까

분류에서Dev

React Native-useState로 만든 배열에 요소를 추가하는 올바른 방법은 무엇입니까?

분류에서Dev

Groovy / Grails 생성자를 비공개로 만드는 방법-올바른 방법

분류에서Dev

스크롤 확대 효과가있는 고정 (수평 스크롤) 헤더로 scrollview를 구현하는 올바른 방법은 무엇입니까?

분류에서Dev

ScrollView 내에서 DataGrid를 올바른 방식으로 스크롤하는 방법은 무엇입니까?

분류에서Dev

브라우저 스크롤바를 정적으로 만드는 방법

분류에서Dev

XAML에서 스크롤 뷰어의 스크롤바를 비대화 형으로 만드는 방법

분류에서Dev

스크롤하여 다른 요소로 요소를 덮는 방법은 무엇입니까?

분류에서Dev

하위 쿼리로 올바른 쿼리 작성기를 만드는 방법

분류에서Dev

big.matrix를 하위 집합으로 만드는 올바른 방법

분류에서Dev

Java : doubleKey 유형으로 매핑, 올바른 hashCode ()를 만드는 방법?

분류에서Dev

angularjs 리소스 및 RESTApi를 사용하여 로그인을 만드는 올바른 방법

분류에서Dev

브랜치를 Git 저장소의 새 마스터로 만드는 올바른 방법은 무엇입니까?

분류에서Dev

div 내부의 요소를 가로로 스크롤하는 방법 javascript / jquery

분류에서Dev

안드로이드의 textview에 스크롤바를 추가하는 방법

분류에서Dev

CSS로 스크롤바가없는 스크롤링 요소

분류에서Dev

Vuetify 구성 요소를 개별적으로 가져 오는 올바른 방법은 무엇입니까?

분류에서Dev

Vuetify 구성 요소를 개별적으로 가져 오는 올바른 방법은 무엇입니까?

분류에서Dev

id Angular 2로 자동 생성 된 요소를 가져 오는 올바른 방법

분류에서Dev

jquery 요소 내부의 버튼 요소를 대상으로하는 올바른 방법?

분류에서Dev

자바 : 스캐너를 만드는 올바른 방법

분류에서Dev

rkhunter : 경고를 추가로 처리하는 올바른 방법?

분류에서Dev

바로 가기를 만드는 방법

분류에서Dev

바로 가기를 만드는 방법

분류에서Dev

바로 가기를 만드는 방법

분류에서Dev

소켓으로 onPreviewFrame () byte []를 보내는 올바른 방법

Related 관련 기사

  1. 1

    jQuery로 새 요소를 만드는 올바른 방법은 무엇입니까?

  2. 2

    Vuetify 앱 바를 가로로 스크롤 가능하게 만드는 방법

  3. 3

    다른 요소를 가리킬 때 div를 위로 스크롤하는 방법

  4. 4

    VueJs-입력 필드로 자식 구성 요소를 만드는 올바른 방법은 무엇입니까

  5. 5

    React Native-useState로 만든 배열에 요소를 추가하는 올바른 방법은 무엇입니까?

  6. 6

    Groovy / Grails 생성자를 비공개로 만드는 방법-올바른 방법

  7. 7

    스크롤 확대 효과가있는 고정 (수평 스크롤) 헤더로 scrollview를 구현하는 올바른 방법은 무엇입니까?

  8. 8

    ScrollView 내에서 DataGrid를 올바른 방식으로 스크롤하는 방법은 무엇입니까?

  9. 9

    브라우저 스크롤바를 정적으로 만드는 방법

  10. 10

    XAML에서 스크롤 뷰어의 스크롤바를 비대화 형으로 만드는 방법

  11. 11

    스크롤하여 다른 요소로 요소를 덮는 방법은 무엇입니까?

  12. 12

    하위 쿼리로 올바른 쿼리 작성기를 만드는 방법

  13. 13

    big.matrix를 하위 집합으로 만드는 올바른 방법

  14. 14

    Java : doubleKey 유형으로 매핑, 올바른 hashCode ()를 만드는 방법?

  15. 15

    angularjs 리소스 및 RESTApi를 사용하여 로그인을 만드는 올바른 방법

  16. 16

    브랜치를 Git 저장소의 새 마스터로 만드는 올바른 방법은 무엇입니까?

  17. 17

    div 내부의 요소를 가로로 스크롤하는 방법 javascript / jquery

  18. 18

    안드로이드의 textview에 스크롤바를 추가하는 방법

  19. 19

    CSS로 스크롤바가없는 스크롤링 요소

  20. 20

    Vuetify 구성 요소를 개별적으로 가져 오는 올바른 방법은 무엇입니까?

  21. 21

    Vuetify 구성 요소를 개별적으로 가져 오는 올바른 방법은 무엇입니까?

  22. 22

    id Angular 2로 자동 생성 된 요소를 가져 오는 올바른 방법

  23. 23

    jquery 요소 내부의 버튼 요소를 대상으로하는 올바른 방법?

  24. 24

    자바 : 스캐너를 만드는 올바른 방법

  25. 25

    rkhunter : 경고를 추가로 처리하는 올바른 방법?

  26. 26

    바로 가기를 만드는 방법

  27. 27

    바로 가기를 만드는 방법

  28. 28

    바로 가기를 만드는 방법

  29. 29

    소켓으로 onPreviewFrame () byte []를 보내는 올바른 방법

뜨겁다태그

보관