Question

我需要一个带垂直文字的垂直菜单。

以下是工作示例的链接：

http://jsfiddle.net/cyxuD/4/embedded/result/

您可以在jsfiddle网站上进行编辑。

如何让它在Firefox和IE中运行？

HTML：

<ul>
    <li><a href="#TabStrip-1">Text 1</a></li>
    <li><a href="#TabStrip-2">Text 2</a></li>
    <li><a href="#TabStrip-3">Very long text...</a></li>
</ul>

Answer 1

垂直文字？像这样：

V
Ë
[R
Ť
我
ç
一个
升
？

我最近更改了sIFR字体替换为我做这个并且它工作得很好 - 如果Flash和Javascript在你的情况下是可以接受的吗？

Answer 2

有趣的CSS技巧。我在我的Firefox中测试过，菜单是垂直的，所以文字，但它看起来位置搞砸了。

在我的调查之后，我发现当“li”元素旋转时，轴位于它的中间，既不是左侧也不是右侧。这就是为什么位置搞乱的原因，因为在旋转之前，“li”元素左对齐但是它们的宽度不同。

我重写了你的一些css，现在这个位置看起来更好，但我认为这不是最好的做法。

ul
{
  float: left;         
  list-style: none;   
  padding: 0;
  margin-left: 40px;     
}

li
{
  display: inline-block;
  margin-left: -85px;
  margin-top: 45px;
  width: 120px;
  border: 1px solid #A7BAC5;
  -webkit-transform: rotate(-90deg); 
  -moz-transform: rotate(-90deg);     
  -o-transform:rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);                 
}

垂直菜单与垂直文本

2 个答案: