인라인 블록이있는 div 위치

div와 div가있는 탐색 영역을 만들려고합니다.인라인 블록이있는 div 위치

목록을 만들고 해당 div 클래스의 인라인 블록을 설정했습니다.

하지만 나는 수평 위치로 설정할 수 없습니다.

숨겨진 스크롤을 가지고 jquery와 함께 움직이게하고 방향키로 div를 클릭하십시오.

는 여기에서 div의 위치와 문제를 볼 수 있습니다 도움을 http://jsfiddle.net/BRtCg/1/

.divsroll { 
    display: inline-block; 
    margin:0; 
    padding: 0; 
    vertical-align: middle; 
} 
#main { 
    width: 500px; 
    height: 500px; 
    border: 1px solid #000; 
    overflow: scroll; 
    margin: auto; 
}

감사를 지금부터.

출처

2013-08-07 Kio Coan

이봐 - 여기에 내가 재미를 위해 만든 하나입니다. 선택한 답변과 거의 비슷하지만 레이아웃을 엉망으로 만드는 버튼을 두 번 클릭하면 문제가 해결되었습니다. http://jsfiddle.net/NBpUN/ 도움이 될 수 있습니다. – Gray

좋습니다! 코드에 추가하려고합니다. 고맙습니다! –

입니다.

: 당신의 CSS에서

, 당신은 (요소의 주위에 여분의 공간을 추가 15 픽셀 계정) 인라인 블록을 위해 ul li를 설정하고 필요한 공간을 차지하기 위해 ul의 폭을 확인해야합니다

#main ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 2015px; 
} 
#main ul li { 
    display: inline-block; 
}

또한 jQuery 코드를 재구성했으며 이제 스크롤 기능이 작동합니다 (Firefox에서 테스트 됨).

HTML 변경 :

<input type='button' value='<<' id="back"> 
<input type='button' value='>>' id="forward">

jQuery를 :

$(document).ready(function() { 
    $('#forward').click(function() { 
     var leftPos = $('#main').scrollLeft(); 
     $("#main").animate({scrollLeft: 505 + leftPos}, 'slow'); 
    }); 

    $('#back').click(function() { 
     var leftPos = $('#main').scrollLeft(); 
     $("#main").animate({scrollLeft: leftPos - 505}, 'slow'); 
    }); 
});

jsfiddle

출처

2013-08-07 13:37:57

그게 바로 제가하고 싶었던 것입니다. 나는 주요 div 만 남겨두고 목록을 삭제하려고 시도했다. divsroll 클래스에 대해 인라인 블록을 설정하십시오. 그러나 여전히 수직 정렬에서 무엇이 잘못 될 수 있습니까? –

'divsroll'은 li 요소 내부의 div입니다. 'inline-block '으로 설정하면'li'의 하위 요소이기 때문에 아무 것도하지 않습니다. li 요소 자체에 인라인 블록을 적용해야합니다. –

이 표시됩니다. 하지만 제가 리를 사용하지 않았다면, 어떻게 그들을 수평으로 정렬 할 수 있을까요? –

<li><div> 태그에 대해 float:left을 설정합니다.

여기에 나는 이것이 당신이 달성하려고하는 것입니다 생각 데모 http://jsfiddle.net/BRtCg/14/

출처

2013-08-07 13:32:45

인라인 블록이있는 div 위치

답변

관련 문제