래퍼를 어떻게 중앙에 놓을 수 있습니까? 리본 메뉴는 절대적이기 때문에 반응 형으로 배치하기가 어렵습니다. 반응 형으로 전환하기 위해 무엇을 변경해야하는지 알고 있습니까?
이것은 라이브 예제입니다 : jsFiddle
body
-nav
-div.r1
div.ribbon(...)
-div.r2
div.ribbon(...)
-div.r3
div.ribbon(...)
-div.r4
div.ribbon(...)
-div.r5
div.ribbon(...)
-div.wrapper(...)
거기에 꽤 흥미로운 디자인이 있습니다. 당신은 많은 숫자를 가지고 있습니다. 본체에 기본 여백이 있고 본체에 5em의 패딩이 있으며 금속 상자를 11.8 % 떨어져 배치합니다. nav 요소를 정렬 된 상태로 유지하려면이 모든 것을 다뤄야합니다. calc를 지원하는 브라우저가 없으면 단위를 혼합하는 것이 꽤 어렵습니다. 이것을 시도하거나 레이아웃을 단순화하십시오.
body {
margin:0;
padding: 5em;
background: #333;
}
.nav {
position: relative;
right: calc(-11.8% + 5em + 7px);
}
jsfiddle : http://jsfiddle.net/up7HD/6/
어디에서 11.8 %를 얻었는지 또는 왜 패딩에 5em을 사용하는지 잘 모르겠습니다. em은 브라우저마다 다르며 기본 글꼴이 변경된 브라우저조차도 글꼴 크기에 상대적이기 때문에 둘 다 이상해 보입니다. 11.8 %는 금속 상자를 중앙에 두지 않고 충분히 유지하지도 않습니다. 매우 작은 화면의 리본을위한 왼쪽 공간.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다