CSS3 회전 및 정렬

나는 메뉴 탐색 - 예쁜 표준으로 작동하는 몇 가지 목록 항목이있는 정규 정렬되지 않은 목록이 있습니다. 센터에서 회전하는 목록 항목을 회전했습니다. 목록의 메뉴 제목은 약간 다르므로 다양합니다. 저는 변환 원점을 사용하여 회전보다는 중심이 아닌 항목의 왼쪽으로 회전하지만 팔과 같이 회전하기 때문에 단어 사이의 간격이 다릅니다. 이것을 피할 수있는 방법이 있습니까? 그래서 왼쪽에서부터 회전하지만 각 단어 사이의 간격은 일정합니까?CSS3 회전 및 정렬

<ul> 
    <li><a href="#">Culture</a></li> 
    <li><a href="#">Eat &amp; Drink</a></li> 
    <li><a href="#">Field Trips</a></li> 
    <li><a href="#">Happenings</a></li> 
    <li><a href="#">Locals</a></li> 
    <li><a href="#">Our City</a></li> 
</ul> 

ul { 
    margin-top: 80px; 
} 
ul li { 
    font-size: 9px; 
    display: inline-block; 
    text-transform: uppercase; 
    margin-right: 10px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    -webkit-transform-origin: 0 100%; 
    -moz-transform-origin: 0 100%; 
    -o-transform-origin: 0 100%; 
    transform-origin: 0 100%; 
}

두 개의 jsFiddles가 포함되어 있습니다. 하나는 목록 항목에 대한 변환이 있고 다른 하나는 변환 및 변환 원점이있는 항목입니다. 이런 일을 - 당신이 요구하는지 이해한다면

http://jsfiddle.net/9eNnN/

http://jsfiddle.net/aKXnz/

고마워, R

출처

2012-11-20 John the Painter

, 당신이 바로 리튬에 일관된 폭을 설정해야합니다 생각 예 : jsfiddle

출처

2012-11-20 20:16:32 kinakuta

고마워요. 나는 이것을 간과했다고 믿을 수 없다. 지금 당장 물어 보는 것이 나쁘지 만, 그럼에도 불구하고 고마워요. –

Np. 여기서 명심해야 할 점은, 여기서 한 것과 같은 상대적 측정을 사용하면 컨테이너에 상대적으로 크기가 조정되고 ul이 충분히 좁아지면 텍스트가 줄 바꿈된다는 것입니다. 고정 된 픽셀 너비 또는 최소 너비를 사용하여 쉽게 방지 할 수 있습니다. – kinakuta

CSS를 사용하는 경우에만 궁금합니다. , http://jsfiddle.net/aKXnz/1/

는 CSS에서 position:absolute로 메뉴를 정의 : 그 동안

, 나는 당신에게 당신의 문제에 대한 자바 스크립트 솔루션을 제공 할 수 있습니다. 그러면 모든 링크가 왼쪽 경계에 놓이게됩니다. 자바 스크립트

var myLis = document.getElementsByTagName('li'); 
for(var i= 0, len = myLis.length; i< len; i++) 
{ 
    myLis[i].style.left = (30*i) + 'px'; 
}

에서

은 단순히 메뉴를 통해 갈 때마다 큰 (선형)로 왼쪽에서 거리를 정의합니다. 원하는 것을 얻을 수 있습니다.

출처

2012-11-20 20:28:58 leMoisela

CSS3 회전 및 정렬

답변

관련 문제