다음과 같은 문제가 있습니다. css를 사용하여 가로형 메뉴로 바뀌는 기본 정렬되지 않은 목록이 있습니다. 그러나 또는 브라우저에서 축소하는 동안, 메뉴 항목은 다음과 같은 다음 행으로 이동 :확대/축소시 메뉴 요소가 튀어 오름
Unzoomed :
| 메뉴 1 | | 메뉴 2 | | 메뉴 3 | | 메뉴 4 |
줌 :
| 메뉴 1 | | 메뉴 2 | | 메뉴 3 |
| 메뉴 4 |
메뉴 항목을 계속 점프하지 않으려면 어떻게해야합니까?
ul (또는 ul을 래핑하는 div)의 고정 된 (최소) 치수로 실험 해보고 오버플로 설정을 지정하십시오. 예 :
ul {
width: 750px;
overflow:auto;
}
좋은 접근 방식이지만 항목에 테두리가 있으면 마지막 항목의 오른쪽 테두리가 손실됩니다. – SinistraD
@SinistraD : 어떻게 그렇게? –
나는 약간의 여유를두고있다. 퍼센트를 사용하는 경우, 보통 ~ 2 %의 허용 한도를 남기려합니다. 당신이 선택한 단위로서 px를 선호한다면, 추정 된 1-2 %의 허용치는 대부분의 반올림 오류를 포함 할 것입니다.
대부분의 브라우저가 확대/축소시 크기를 계산하기 위해 다른 방법을 사용하기 때문에 확대/축소 동작이 브라우저간에 일치하지 않을 수 있습니다.
는 내가 본 한 정말 일반적인 문제 이잖아 position: relativeli의 요소
을 적용하려고합니다. 나는 너비가 픽셀 단위로 주어 졌다고 생각한다. 따라서 확대하고 다음 너비로 반올림하면 합계가 100 % 이상 커질 것이다. 픽셀 대신 % 크기를 사용해보세요. – SinistraD
%를 사용하면 대부분 문제가 안정화 된 것으로 보입니다. 고마워요 SinistraD. – Tomkarho
float 부모 (ul) float 또한 jquery 솔루션을 중심으로 정렬하려면 ul –