HTML + CSS 탭 표시 줄

HTML + CSS 수평 탭 표시 줄을 깨끗하게 스타일 지정하여 탭 바가 활성 탭에 대해 숨겨 지거나 표시되지 않도록 아래쪽에 선을 갖도록하려면 어떻게해야합니까? 즉 HTML + CSS 탭 표시 줄

, 나는에 유래가 태그를 수행하는 것과 같은 일을 할 노력하고있어 : 내 탭 표시 줄은

ul 
{ 
    list-style: none; 
} 
li 
{ 
    float: left; 
}

업데이트로 정렬 된 목록으로 설정

: 나는 방화범이 끌린 사이트를 이미 둘러 보았습니다. 그런데 어떻게하는지 봅니다. 그러나 나는 세부적인 것으로 빠져 나간 것처럼 느낍니다. 예를 들어, StackOverflow의 버전에는 전체 div의 아래쪽에 경계선이 있고 (의미가있는) 활성 탭의 아래쪽에 흰 경계선이 있습니다 (이는 의미가 있습니다). 그러나 활성 탭의 경계선이 div의 경계와 겹치도록 만듭니다 (그리고 나는 그것이 어떻게하는지에 관해서는 아주 명확하지 않다). Twitter Bootstrap과 비슷한 것으로 보입니다. CSS의 복사와 팅커 작업 대신 컨테이너의 테두리 부분과 컨텐트의 테두리가 어떻게 겹쳐 지는지에 대한 일반적인 개념을 이해하려고 노력하고 있습니다.

출처

2013-01-17 Josh Kelley

당신은 아무것도를 시도 여기

매우 간단한 예입니다? 아니면 적어도 StackOverflow의 CSS에서 코드를 받고? – DrCord

<ul>에 아래쪽 테두리를 놓은 다음 (가로로 늘어서도록) <li>에 선택한 클래스를 지정하고 높이가 1 픽셀 높아야합니다. http://jsfiddle.net/V6gzS/

출처

2013-01-18 14:54:32 skyline3000

확인을 올바른 방향으로 사용 불을 지르고 또는의 Chromes 요소 관리자에서 당신을 가리켜 당신이 탭라고 찾고있는 것을 예를 들어이 사이트에, 그래서 당신이 필요로하는 비트를 선택하고 그들이 그렇게

같은 스타일된다합니다

#tabs a.youarehere { 
background: #fff; 
border: 1px solid #ccc; 
border-bottom-color: #ffffff; 
color: black; 
font-size: 120%; 
height: 30px; 
line-height: 28px; 
margin-top: 3px; 
padding: 0px 11px 0px 11px; 
}

이 그것의 단지 부분이다하지만 난 당신이 가로 결론과 함께, 직접 버튼을 할 수있는 이해로서 당신은 몇 가지 코드

출처

2013-01-17 15:15:03 Richlewis

을보고 많은 것을 배울 수 있습니다.

그런 경우이 가로선이 각 버튼에 border-bottom: solid 1px #CCC 속성으로 만들어 졌는지 확인하십시오 (색이 다를 수 있음). 각 페이지에서 id id="current"을 활성 페이지 인 해당 버튼에 추가하십시오. CSS에서는 쓰기 :

#current { 
    border: solid 1px #CCC; 
    border-bottom: 1px solid white; 
}

당신이이 같은 !important을 추가하여 해결 될 수있는 문제가있는 경우 :

border-bottom: 1px solid white !important;

따라서,이 단지 4 별도의 CSS 코드의 라인과 하나 추가 HTML입니다 각 파일의 속성

동적 메뉴가 당신이 모든 페이지에 정적이 아닌 메뉴를 가지고 있지만, 어쩌면 동적으로 생성 또는 포함 된 파일에 배치하면

, 다음 위의 가능하지 않습니다. 왜냐하면 각 개별 페이지에 새 ID를 쉽게 추가 할 수 없기 때문입니다.

그런 경우 속성을 동적으로 추가 할 수 있습니다. 서버 측 언어가 사용되는 경우 (예 : PHP를 사용하면 URL 또는 GET 요청을 확인하는 명령을 if{...}으로 쉽게 설정할 수 있습니다. 또는 버튼 텍스트가 페이지의 일부 헤더와 동일한 경우 일부 자바 스크립트를 사용하여 각 버튼을 확인하고 id 속성을 추가 할 수 있습니다.

귀하의 이해를 바랍니다. 행운을 빕니다.

출처

2013-01-17 15:34:08 Steeven

테두리가 전체 탭 막대 (각 단추/탭의 위치가 아닌)로 확장되도록하려면 어떻게해야합니까? –

@ JoshKelley. 나는 네가 의미하는 바를 잘 모르겠다. 테두리가 단추 너비보다 멀리 확장 된 경우 질문에 그림에 표시되는 그래픽을 어떻게 만들 수 있습니까? 그러면 수직 경계선은 무엇을해야합니까? – Steeven

@Steven - 탭 단추가 화면의 너비를 확장하지 않더라도 탭 바의 테두리가 화면 또는 부모 (SO 및 Twitter 부트 스트랩과 같은)의 너비를 확장하도록합니다. 나는 이것을하기 위해 아직도 모호하다. 각 탭에 불투명 한 테두리를 지정하면 테두리가 화면의 너비를 확장하지 않으며 전체 탭 막대에 아래쪽 테두리를 지정하면 활성 탭, 흰색 아래쪽 테두리가 위에 위치합니다. 경계를 바꾸는 대신에 –

, 나는 다음과 같이했다 :

ul { 
    list-style-type:none; 
} 
li{ 
    float: left; 
    border-bottom: 1px solid #CCC; 
} 
li:hover{ 
    float: left; 
    border: solid 1px #CCC; 
    border-bottom:none; 
}

출처

2017-01-20 21:29:26

HTML + CSS 탭 표시 줄

답변

관련 문제