computer-database-jpa 샘플의 테이블 헤더 CSS는 무엇입니까?

Play 2에는 열 정렬을 지원하는 샘플 computer-database-jpa이 있습니다. 기본적으로 컴퓨터별로 정렬되며, 화살표는 정렬 순서를 나타냅니다. 나는 다른 프로젝트에서이 CSS 스타일/화살표 필요하지만, 심지어 화살표가 어디에서 오는 난 아직도 볼 수없는이 테이블 헤더computer-database-jpa 샘플의 테이블 헤더 CSS는 무엇입니까?

<th class="name header headerSortDown"> 
    <a href="/computers?o=desc">Computer name</a> 
</th>>

의 CSS 코드를 검사 한 후? 이것에 대한 어떤 힌트? 감사!

enter image description here

업데이트 : https://github.com/playframework/Play20/tree/master/samples/java/computer-database-jpa/public/stylesheets

그러나 예를 들어,에 :

하나는 여기에 CSS를 검색 할 수 후속 질문에 대한

어떻게 바로 옆에 텍스트에있는 화살표를 얻을 수 headerSortDown I)는 화살표처럼 보이는 뭔가를 찾을 수없는 이유는 무엇입니까? enter image description here

출처

2012-12-31 stefan.at.wpf

그것은 CSS 파일의 추가 이미 이것 좀 봐했지만, STH를 찾을 수 없습니다' –

.headerSortDown {...}'도 찾아보실 수 있습니다 - 호버에들) . 그것은 마치 화살처럼 보입니다. CSS를 탐색하는 링크가 추가되었습니다. 확인해 볼 수 있습니까? 고마워 :-) –

부트 스트랩 : http://twitter.github.com/bootstrap/base-css.html#icons. 어딘가에 스프라이트 파일이 있습니다. 독립 실행 형 파일이 아닌 것으로 가정합니다. –

가장 쉬운 방법은 브라우저의 검사 도구를 사용하는 것입니다 (또는 파이어 폭스에서 즉 불을 지르고 내장 된 크롬에서 관리자) 당신은 그들이 '그리기'되어 볼 수

여기, 화살표의 독립 추출물의 CSS 테두리 화살표 (이미지가 필요 없음) 여기

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Arrows a'la Twitter Bootstrap</title> 
     <style type="text/css"> 

      .header { 
       width: 200px; 
       background-color: #c2ccd1; 
       padding: 4px; 
       margin: 2px; 
      } 

      .header:after { 
       content: ""; 
       float: right; 
       margin-top: 7px; 
       visibility: hidden; 
      } 

      .headerSortDown:after, .header:hover:after { 
       border-width: 0 4px 4px; 
       border-style: solid; 
       border-color: #000 transparent; 
       visibility: visible; 
      } 

      .headerSortUp:after { 
       border-bottom: none; 
       border-left: 4px solid transparent; 
       border-right: 4px solid transparent; 
       border-top: 4px solid #000; 
       visibility: visible; 
      } 

     </style> 
    </head> 
    <body> 
     <div class="header">Not selected</div> 
     <div class="header headerSortDown">Arrow up (sorting ASC)</div> 
     <div class="header headerSortUp">Arrow down (sorting DESC)</div> 
    </body> 
</html>

그리고는 nice tutorial about drawing triangles with CSS border입니다. 당신이 어떤 inline와 그 화살표를 사용합니다 경우 (이 200px있어 위의 샘플에서) 전체 폭 또는 CSS 스타일에 주어진 너비를 사용하려고 있도록

편집

DIV는 태그는 block 디스플레이를 사용 예를 들어 A 또는 SPAN과 같은 화살표는 텍스트에 '접착'됩니다. display: inline-block;을 width를 제거하고 추가 : 물론 당신은 또한 .header 선언

(샘플을 수정하여) 그렇게 인라인으로 간단한 방법을 DIV를 표시 강제 할 수

.header { 
    /* width: 200px; don't set width anymore */ 
    background-color: #c2ccd1; 
    padding: 4px; 
    margin: 2px; 
    display: inline-block; /* force displaying DIV as an inline element */ 
}

텍스트 사이의 공간을 제어하려면 당신은 인라인 요소에있는 화살표를위한 공간을 보존하려는 경우

가

.header:after { 
    content: ""; 
    float: right; 
    margin-top: 7px; 
    visibility: hidden; 
    margin-left:4px; /* space between text and arrow for inline elements */ 
}

OR (폭 장을 피하기 위해 : 단지 .header:after 부분 margin-left 속성을 사용하여 화살표 당신은 또한, 투명 '화살표'

.header:after { 
    content: ""; 
    float: right; 
    margin-top: 7px; 
    visibility: visible; /* make it visible by default */ 
    margin-left:4px; /* space between text and arrow for inline elements */ 
    border: 4px solid transparent; /* set borders to transparent, so they won't show */ 
}

출처

2012-12-31 14:54:23 biesior

오, 그래서 그것을 발견했지만, 그것을 보았을 때 그것을 이해하지 못했습니다 ;-) 샘플을 주셔서 감사합니다 :-) –

다음 질문 하나를 따르십시오 : 측면) 다음 헤더에? –

원본 게시물의 "후속 질문 :"을 참조하십시오. 오른쪽 바깥쪽에 화살표가 싶지 않지만 텍스트 바로 옆에 :-) –

computer-database-jpa 샘플의 테이블 헤더 CSS는 무엇입니까?

답변

관련 문제