我有一个标题,我希望它是垂直的而不是水平的。通过我使用的 CSS,它确实水平翻转了它,但它创建了一个单独的边框。
像这样:
#scheduled2 {
transform: rotate(270deg);
position: relative;
top: 300px;
background-color: darkgray;
font-size: 14px;
}
th {
border: 1px solid lightgray;
padding: 12px;
}
<table>
<tr>
<th id="scheduled2">Scheduled Volumes</th>
</tr>
<tr>
<th id="manning2">Manning Volumes</th>
</tr>
</table>
如果我使用 float: right,它可以解决问题,但会导致标题元素在屏幕尺寸不同时无法停留在正确位置的新问题。当未添加 float 但随后将其分开时,我可以让它留在原地,如图所示。
最佳答案
尝试使用这个CSS:
writing-mode: vertical-rl;
text-orientation: mixed;
或尝试将您的文本放入<p></p>
<table>
<tr>
<th><p id="scheduled2">Scheduled Volumes</p></th>
</tr>
<tr>
<th id="manning2">Manning Volumes</th>
</tr>
</table>
希望对你有帮助:)
----编辑----
你可以试试把table改成div
<div class="border" id="scheduled2">Scheduled Volumes</div>
<div class="border" id="manning2">Manning Volumes</div>
和CSS:
#scheduled2 {
transform: rotate(270deg);
position: relative;
top: 300px;
background-color: darkgray;
font-size: 14px;
}
.border{
border: 1px solid lightgray;
padding: 12px;
}
关于css - 元件未固定到位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51748421/