2013-12-19 5 views
0

sortable 요소가 display : block을 갖도록하는 JQuery UI sortable을 사용하고 있습니다.JQuery UI 스타일을 어떻게 대체합니까?

그러나이 요소에 display : inline-block을 사용하고 싶습니다.

이 CSS를 사용해 보았습니다. .item {display : inline-block! important; }

하지만 작동하지 않습니다 (Chrome 콘솔에서 계산 된 스타일에 의해 입증 됨).

나는 또한 다음 JQuery와 문을 사용하여 시도했다 : $ ('. 항목') CSS ({디스플레이 : '인라인 블록'}).

하지만 그 중 하나가 작동하지 않습니다.

어떻게 JQuery UI 스타일을 재정의 할 수 있습니까?

+1

높은 특이성 CSS 선택기를 사용하여. – DrCord

+0

'jquery-ui.css'를 참조하기 전이나 후에 CSS를 정의하고 있습니까? –

+0

어디서나 jquery-ui.css를 참조하지 않습니다. jquery-ui.js를 사용하고 있습니다. – user1050268

답변

0

해결책은 float : none을 설정하여 원하는 표시 스타일의 인라인 블록을 표시 할 수있게하는 것이 었습니다. 그런 다음 vertical-align : top을 설정하여 요소가 맨 위에 정렬되도록해야했습니다. 총 css :

.item { 
    float:none; 
    display:inline-block; 
    vertical-align:top; 
} 
0

올바른 클래스를 타겟팅하고 있습니까?

내 jquery-ui 정렬 가능하기 때문에 완벽하게 작동합니다.

#tabs .word-list li { 
margin: 3px; 
background-color: #FCFCFC; 
padding: 7px 16px; 
border-radius: 30px; 
border-bottom: 2px solid #C7C7C7; 
border-right: 2px solid #B1B1B1; 
display: inline-block; 
} 

또한 jquery-ui-css 파일을로드하지 않습니다. 부풀려졌습니다. 그리고 어쨌든이 요소들에 대한 제 스타일을 펼치면, 당신의 경우가 아닐 수도 있습니다.

더 구체적으로 타겟팅하십시오. 내가하는 것처럼. id-> class.

또한 사용자 정의 스타일 앞에 jquery-ui-css 파일을 포함시켜보십시오.

+0

높은 수준의 특이성을 가진 올바른 클래스를 확실히 타겟팅하고 있습니다. 또한 jquery-ui-css 파일을로드 한 적이 없으며 jquery-ui.js 파일 만 사용하고 있습니다. 그래서 왜 내 마지막에 작동하지 않는지 잘 모르겠다. – user1050268

+0

@ user1050268 jsfiddle보다 만들기 : –

+0

좋은 제안! 내 문제는 jquery UI 수준보다 낮아서 실제로 html/css와 관련된 문제입니다. 마찬가지로, 다음 jsfiddle float 요소에 네 번째 항목이 컨테이너의 왼쪽 테두리 (세 번째 항목 바로 밑에 배치하는 대신)에 오도록 그 요소를 갖기 위해 노력하고 있습니다. http://jsfiddle.net/emg6x/ 그냥 행 컨테이너 인 div를 만들지 않고이 작업을 수행하는 방법을 알고 계십니까? – user1050268

관련 문제