그래서이 수평 메뉴 막대는 페이지 중심에 CSS로 완전히 스타일이 지정되어 있고, 확대 또는 축소 할 때마다 테두리가 포함 된 요소보다 넓어 지거나 마지막 요소가 다음 요소로 내려 가게됩니다 선. 브라우저를 확대 할 때 어떻게 작동합니까?브라우저에서 크기를 조정해도이 메뉴가 가운데에 맞춰져 있고 테두리가 생기게하려면 어떻게해야합니까?
해당 html 파일은 http://fullforcespiritwear.com/example.html이며, CSS는 http://fullforcespiritwear.com/ex.css입니다.
<body> 또는 외부 컨테이너에 너비를 지정하고 고정 너비 대신 <ul> 너비의 백분율 값을 사용하십시오.
body {
background-color:black;
width:1015px;
}
#nav {
border:2px solid #FF0000;
display:block;
height:37px;
margin:0 auto;
padding:0;
width:100%;
}
빠른 타협 결제가 같습니다에서 픽셀 하드 폭을 제거하고 리튬에 백분율 유체 폭을 추가 http://www.jsfiddle.net/pereskokov/eMPCD/.
편집 : 새로운, 달콤하고 시원한 버전 :이 작업을 수행 할 때 http://www.jsfiddle.net/pereskokov/eMPCD/1/
니스! 줌 인 할 때 문제가 완전히 해결되지만, 축소 할 때 여전히 인공물이 있습니다. jsfiddle에서 축소하면 #nav의 빨간색 테두리가 요소의 결합 된 너비를 초과하고 검은 색 배경이 많이 빛나는 것을 볼 수 있습니다. – fishman
순수한 CSS에는 해결책이 없다고 생각합니다. 확대/축소 할 때 픽셀의 너비가 정수가 아닌 부동 소수점이되기 때문입니다. 다른 해결책이 있습니다 - ul에서 빨간색 테두리를 제거하고 li에이 경계를 추가하십시오. http://www.jsfiddle.net/pereskokov/eMPCD/1/ –
모두 여전히 문제가 발생합니다. – fishman