하위 div 요소보다 확장되는 하위 메뉴

내 문제를 표시하는 jsfiddle이 있습니다 : . 내 옵션 (메뉴 링크)은 메뉴가 포함 된 탐색 내비게이션 div보다 더 확장됩니다. 나는 각 요소에 대해 내 패딩과 관련이 있다는 것을 알고 있지만 왜 그런지 모르겠습니다.하위 div 요소보다 확장되는 하위 메뉴

도움을 주시면 감사하겠습니다.

CSS 코드 :

이

@charset "utf-8"; 
/* CSS Document */ 
body { 
    font-size:100%; 
    font-family:Arial, Helvetica, sans-serif; 
} 
.navigation, .navigation a { 
    width:245px; 
    background-color:#363636; 
    color:#ffffff; 
} 
.navigation h3 { 
    padding:8px 2px 0 2px; 
    margin:0; 
} 
.navigation ul { 
    list-style:none; 
    margin:0; 
    padding:0; 
} 
.navigation li { 
    margin:0; 
    display:list-item; 
} 
.deeper.parent { 
    background-color:#292929; 
    padding:10px 2px; 
} 
span.nav-header { 
    text-align:left; 
    font-weight:bold; 
} 
ul.nav-child li a { 
    text-align:right; 
    display:block; 
    padding:10px 2px; 
} 
ul.nav-child a:hover, ul.nav-child a:focus { 
    background-color:#4a4a4a; 
}

출처

2014-12-22 user2293267

여백은 너비를 추가하므로이를 고려해야합니다. 'width : 20px'및 'padding : 5px'가있는 div는 실제로는 30px 넓이이며 원본 20px와 각면에 5px (20 + 5 + 5) –

당신이 올바른지! 그것은 당신의 문제를 일으키는 패딩입니다. 그래서 ul.nav-child li a 스타일이 추가

width: calc(245px - *The Padding*);

을 *The Padding* 당신이 그 요소를 가지고있는 패딩입니다. 귀하의 경우, 4px에, 그래서 당신의 코드로 나올 것이다 :

ul.nav-child li a { 
    width: calc(245px - 4px); 
    text-align:right; 
    display:inline-block; 
    padding:10px 2px; 
}

Updated Fiddle

출처

2014-12-22 20:28:59 Luke

8px가 아닌 4px가되어야합니다 (각 2px는 2px입니다. 2 + 2 = 4). calc를 사용하려고한다면 calc (100 % - 4px)를 쓰면 부모 너비가 바뀌면 너비가 조정됩니다. 그렇지 않으면'241px'라고 말할 수 있습니다. 하지만 나는 Calc 함수를 전혀 알지 못했고, 매우 유용했습니다! –

만이 최신 브라우저에서 작동하도록 사용 상자 크기 조정해야하는 경우 : 경계 박스 (http://css-tricks.com/box-sizing/)

를

ul.nav-child li a { 
    box-sizing: border-box; 
    text-align:right; 
    display:block; 
    padding:10px 2px; 
}

출처

2014-12-22 21:09:19 sdjn

하위 div 요소보다 확장되는 하위 메뉴

답변

관련 문제