jquery - 自定义 jQuery 图表中的文本对齐方式

Question

我的页面运行良好，大部分看起来都很棒。我遇到的最大问题是列标题中的旋转文本未对齐。我该如何“铺平”文本。正如你在 fiddle 中看到的，它从盒子中间开始并出界。我想将其从盒子底部开始放置，但不知道如何放置。

我的旋转功能运行良好，并保持列宽符合我的需要。

.r90 span {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    font-family:verdana;
    display:inline-block;
    white-space:nowrap;
    width: 30px;
}

我的字段 CSS 拉长了它。

th {
 height: 550px;
}

http://jsfiddle.net/michaela_elise/CFNHP/

那么在哪里以及如何调整文本的位置呢？我一生都无法弄清楚:P

Answer 1

您只需在容器上指定垂直对齐方式:

.r90 {
    vertical-align: bottom;
}

您还可以在 <span> 的左侧添加一些填充元素，以便在容器和文本之间留出一些空间:

.r90 span {
    padding-left: 1em;
}

您会发现更新的 fiddle here .