1

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

    }

这是网页的样子：在此处输入图像描述

我希望“家”像原来一样旋转，但要放在一个列表中。所以它会像现在一样从网页顶部开始，但不是位于其下方的文本，而是正确的。问我是否需要澄清，我很难解释。

4

1 回答 1

3

你的 CSS 几乎是正确的。我将旋转从ultoli元素移动并更改了一些边距/填充。

干得好：

#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/

更新
修复了 JS Fiddle，它没有使用有效的解决方案进行更新

于 2013-04-27T06:06:52.050 回答