css - 元件未固定到位

Question

我有一个标题，我想要垂直而不是水平。使用我使用的 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，它会解决问题，但会导致标题元素在屏幕尺寸不同时无法停留在正确位置的新问题。当浮动未添加但随后它被分离时，我可以让它保持在原位，就像在图像中一样。

标签： csslayoutpositioncss-floatelements

Answer 1

尝试使用这个 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>

希望能帮助到你 ：）

- - 编辑 - -

您可以尝试将表更改为 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;
}