너비 (퍼센트 - 경계선)

5 개의 링크가있는 수평 탐색 바를 만들고 싶었고 너비를 20 %로 설정했습니다. 내 링크에 1 픽셀 테두리를 추가하자마자 20 퍼센트 이상 커지고 마지막 링크가 새로운 라인으로 이동합니다! 이 문제를 어떻게 해결할 수 있습니까?너비 (퍼센트 - 경계선)

CSS를 사용하면 CSS가 음수 패딩 값을 사용하여 테두리가 실제로는 주위 요소가 아닌 요소 위에 있도록 할 수 있기를 기대했지만 그럴 수는 없습니다.

출처

2009-08-25 Juddling

함께 놀기 위해 IE6/7이 필요한 경우 여분의 내부 요소가 필요하거나 음수 여백을 시도 할 수 있습니다. 나의 추천 같은, 자신을 당신의 탐색에 대한 목록을 사용하고, 링크에 테두리를 추가하는 것입니다

<ul id="nav"> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
</ul>

~~즉, 의심 할 여지없이입니다~~ (갱신 :사용은 할 수 HTML5 당신이 지금 할 수 있습니다. 탐색을위한 가장 의미 론적 인 마크 업을리스트 주위의 nav 엘리먼트를 사용하여). 그런 다음 CSS는 간단하다 :

#nav li { 
    float: left; 
    width: 20%; 
} 

#nav li a { 
    display: block; 
    border: 1px solid #000; 
}

OR :

#nav li { 
    /* Opera 8.5+ and CSS3 */ 
    box-sizing: border-box; 
    /* Firefox 1+ */ 
    -moz-box-sizing: border-box; 
    /* IE8 */ 
    -ms-box-sizing: border-box; 
    /* Safari 3+ */ 
    -webkit-box-sizing: border-box;

: 여분의 재미를 위해 일부 도움으로 모든 최신 브라우저 (/ 7 없습니다 IE6)로 제공하는 대신 CSS3 상자 크기 조정 선언을 시도 할 수 있습니다

출처

2009-08-26 09:14:39

nope, 박스 모델 add는 합계에 테두리가 있으므로 특정 폭을 추가해야 할 경우이를 혼합하지 않을 것입니다. 귀하의 경우 100 %에 div (또는 일부 블록 요소)를 넣으십시오. 개체가 20 %가되어야하고 이되도록 테두리가있는 100 %.

출처

2009-08-25 22:38:20

그것이 내가 Or 부분에서 말했던 것입니다. –

은 아마도 우리가 아마 같은 시간에 대답 한 것처럼 보입니다. –

그것은 누군가 내가 왜 내 게시물을 썼는지 궁금합니다. –

-1px 여백이 적용될 수 있습니다. YMMV.

출처

2009-08-26 09:09:48 Ms2ger

너비 (퍼센트 - 경계선)

답변

관련 문제