在CSS中垂直显示内联列表

Question

我有一个菜单，我正在尝试为我的网页运行，它会跑到它的右侧，我希望它是垂直的，但我有麻烦让文本在上下都对齐。 我真的没有取得任何进展让它显示正确，但这里是旋转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;

    }

这是网页的样子：

我想让'Home'按原样旋转，但要列在列表中。 所以它会像现在一样从网页的顶部开始，但不是文本在它下面，而是它是正确的。 问我是否需要澄清，我有麻烦解释。

Answer 1

你的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 Fiddle，它没有使用工作解决方案进行更新