0

我想知道是否有一种方法可以使用水平文本垂直子菜单和垂直文本进行水平 css 菜单。我尝试过，但是在旋转第二个 ul（垂直）时，对齐会崩溃。另外我希望菜单向左流动，直到我最后一个垂直菜单.. 可以这样做吗？请帮忙。

<style>
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#table-header {
    float: left;
    width: 8%;
}
.vertical-list-container {
    float: left;
    width: 90%;
}
.vertical-list{
    float: left;
    width: auto;
}
.vertical-list-trans{
    float: left;
    border-left:1px solid green;
    border-right:1px solid red;
    border-top:1px solid blue;
    border-bottom:1px solid black;
    -webkit-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
         -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>

<div class="vertical-list-container">
    <ul class="vertical-list-trans">
        <li>1</li>
        <li>John Doe</li>
        <li>123 Address Lane</li>
    </ul>
    <ul class="vertical-list-trans">
        <li>2</li>
        <li>Jane Doe</li>
        <li>456 Another Road</li>
    </ul>
    <ul class="vertical-list-trans">
        <li>1</li>
        <li>John Doe</li>
        <li>123 Address Lane</li>
        <li>2</li>
        <li>Jane Doe</li>
        <li>456 Another Road456 Another Road456 Another Road</li>
    </ul>
    <ul class="vertical-list-trans">
        <li>2</li>
        <li>Jane Doe</li>
        <li>456 Another Road</li>
        <li>123 Address Lane</li>
        <li>2</li>
        <li>Jane Doe</li>
        <li>456 Another Road456 Another Road456 Another Road</li>
        <li>123 Address Lane</li>
        <li>2</li>
        <li>Jane Doe</li>
        <li>456 Another Road456 Another Road456 Another Road</li>
    </ul>
</div>
4

2 回答 2

0

来自w3.org 上的CSS 变换 > 变换渲染模型规范：

在 HTML 命名空间中，transform 属性不会影响转换后元素周围的内容流。但是，溢出区域的范围考虑了变换的元素。此行为类似于通过相对定位偏移元素时发生的情况。

请参阅此代码笔： http ://codepen.io/keithwyland/pen/evFof

请注意，即使红色的 div 被转换，div 的流也不会改变。红色 div 的高度仍在内容的流动中，并将绿色 div 向下推，就好像它没有被转换一样。这正是在规范中定义转换的方式。

这就是为什么当您旋转导航项目时，对齐显示为关闭。它们似乎不再彼此靠近，但实际上根据流程，它们确实如此。

这是另一个例子： http ://codepen.io/keithwyland/pen/DKLHi

请注意，在此示例中，绿色 div 是如何漂浮在红色 div 的流动位置旁边的，而不是它如何转换的右边缘。

于 2013-04-23T20:10:24.167 回答
0

我不太确定问题出在哪里，但是从标题中我认为您正在寻找带有垂直“子菜单”的水平“菜单”。

您将需要与“子菜单”上的位置transform-origin: top left;一起使用transform: rotate(90deg);，然后摆弄position:absolute; top:--px; left:--px;

有点难以解释，请参阅 jsfiddle 以获取工作示例。

jsFiddle

于 2013-04-23T21:47:48.773 回答