Question

我有一个td表字段，指定宽度为20px，高度为200px。我在这个td里面有“previous”这个词。此文本旋转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宽度，然后旋转文本。我试过在td的宽度上添加！important，但是td仍然会根据文本的长度进行调整。有什么想法吗？

Answer 1

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

Answer 2

将 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);
}

DEMO http://jsfiddle.net/ddxVM/

表td宽度被内部文本覆盖

2 个答案: