css - 表格 td 宽度被内部文本覆盖

Question

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

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

我的css(less)如下:

#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 仍会根据文本的长度进行调整。有什么想法吗？

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