CSS에서 인라인 목록을 세로로 표시합니다.

메뉴가 있습니다. 오른쪽에 도망 가려는 웹 페이지를 만들기 위해 노력하고 있는데, 세로로하고 싶습니다.하지만 텍스트를 가져 오는 데 문제가 있습니다. 위아래로 정렬하면서 정렬합니다. 정말 잘 전혀 표시 얻기에 어떤 진전을 만들었지 만, 여기에 회전 CSS 등의되지 않은 : 나는 '홈'을 원하는 enter image description here CSS에서 인라인 목록을 세로로 표시합니다.

: 같은

여기

#rightmenu { 
    border-top: 1px solid #000000; 
    border-right: 1px solid #000000; 
    border-bottom: 1px solid #000000; 
    width:30px;height:578px; 
    border-bottom-right-radius:10px; 
    border-top-right-radius:10px; 
    float:right; 
    margin-top:-554px; 
} 
    #rightmenu p { 

    } 
    #rightmenu ul { 
     width:30px; 
     height:20px; 
     -ms-transform:rotate(90deg); 
     -moz-transform:rotate(90deg); 
     -webkit-transform:rotate(90deg); 
     -o-transform:rotate(90deg); 
     font: 18px normal, sans-serif; 
     list-style-type:none; 
     padding:0; 

    } 
    #rightmenu li { 
     display:inline; 

    }

는 웹 페이지가 어떻게 표시되는지를 보여줍니다 회전하는 것처럼 보이지만 목록에 들어가야합니다. 이제는 웹 페이지의 맨 위에서 시작되지만, 텍스트는 그 아래에있는 것이 아니라 올바른 것입니다. 내가 명확히해야하는지 물어 보면, 나는 설명하는 데 어려움을 겪고있다.

출처

2013-04-27 Nash Read

따라서 작업 솔루션으로 업데이트되지 않은 I 아무도 몰라요? –

저는 귀하의 개인 기술 지원이 아니라고 생각하고 누군가 귀하의 질문에 답변하기를 원할 것입니다. – Artless

글쎄, 나는 너에게 화를내는 것을 의미하지 않았다. '이게 가능하지 않니?' 그보다 훨씬 더 잘 어울리는 버전이었을 지 모르지만, 나는 다른 옵션을 생각하거나 디자인을 바꾸어야할지 궁금하다. 유감스럽게 생각합니다.]] –

CSS가 거의 옳았습니다. 회전을 ul에서 li 요소로 이동하고 일부 여백/패딩을 변경했습니다. 여기

당신은 갈 :

#rightmenu { 
    float:right; 
} 

#rightmenu ul { 
    list-style-type:none; 
    border: 1px solid #000; 
} 

#rightmenu li { 
    display:block; 
    padding: 20px 0px; 

    -ms-transform:rotate(90deg); 
    -moz-transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); 
    -o-transform:rotate(90deg); 
}

당신이있어 작업을 볼 수 있습니다 http://jsfiddle.net/A3WaD/2/

UPDATE
JS 바이올린 고정, 그것은

출처

2013-04-27 06:06:52 Artless

감사합니다. 잘됐다. 수용 가능한 해결책에 대해 –

+1하지만 정말 그것에 대해 불쾌 할 필요는 없었습니다. – iGanja

CSS에서 인라인 목록을 세로로 표시합니다.

답변

관련 문제