0

我有一个 td 表字段，其指定宽度为 20px，高度为 200px。我在这个 td 中有“以前”这个词。此文本旋转 90 度。吨

<table id="next-arrow">
    <tr>
        <td><a href="#"><span>Previous</span></a></td>
    </tr>
</table>

我的CSS（少）如下：

#previous-arrow
    {
        position: absolute;
        top: 600px;
        left: @vert-out + 10;

        td
        {
            height: @carousel-height;
            width: 20px;
            background-color: @yellow;

            span
            {
                display: block;
                -webkit-transform: rotate(-90deg);

            }
        }
    }

td 的宽度似乎被其文本的长度所覆盖——文本越长，td 越宽。看起来好像水平记录了文本的长度，然后设置了 td 宽度，然后旋转了文本。我尝试将 !important 添加到 td 的宽度，但 td 仍会根据文本的长度进行调整。有任何想法吗？

4

2 回答 2

1

哇！这很快......在 div 中设置一个最大宽度，问题就解决了。

于 2012-11-16T20:49:40.997 回答
1

用这个替换你的CSS

#next-arrow{
    position: absolute;
    top: 600px;
    left: @vert-out + 10;
}

#next-arrow td{
    height: @carousel-height;
    max-width: 20px;
    background-color: yellow;
}

#next-arrow span{
    display: block;
    -webkit-transform: rotate(-90deg);
}

演示 http://jsfiddle.net/ddxVM/

于 2012-11-16T20:54:09.653 回答