Question

我想知道是否有办法用水平文本垂直子菜单和垂直文本做水平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>

Answer 1

来自w3.org上的CSS Transforms > Transform Rendering Model规范：

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

看到这个codepen： http://codepen.io/keithwyland/pen/evFof

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

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

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

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

Answer 2

我不确定问题中的问题是什么，但从标题中我认为你正在寻找一个带有垂直“子菜单”的水平“菜单”。

您需要使用transform-origin: top left;和transform: rotate(90deg);，然后在“子菜单”中摆弄position:absolute; top:--px; left:--px;

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

jsFiddle

带垂直子菜单的水平菜单

2 个答案: