时间戳

首页 > 解决方案 > 如何在 HTML 和 CSS 中为垂直线赋予数字

javascript - 如何在 HTML 和 CSS 中为垂直线赋予数字

问题描述

我想在 HTML 和 CSS 中创建像线一样的 Y 轴。我希望这条线看起来像 Y 轴。

我尝试了以下方法。它按我的预期工作，但看起来不太好。

#mySpan{
  writing-mode: vertical-lr; 
  transform: rotate(180deg);
}
<table >
    <tr>
    <td><span style="writing-mode: vertical-lr; 
        transform: rotate(180deg);"> <b>Secondary Axis</b></span></td>
    <td>
    <ul>
    <br><br><br>
        <li>3</li><br><br><br><br>
        <li>2</li><br><br><br><br>
        <li>1</li><br><br><br><br>
        <li> 0</li><br><br><br><br>
        </ul>
    </td>
    <td> 
        <div  style="border-left: 1px solid black; height:250px;position:left;left: 50%;">            
        </div> 
     </td>


    </tr>
</table>

它也在顶部或底部消耗空间。可能是因为我使用了 br 标签。

有没有人建议我需要做哪些更改/修改，使其看起来像 Y 轴。

谢谢

标签： javascripthtmlcss

解决方案

这是您可以创建它的方式，display: flex;在父级上使用以使子级灵活

flex-direction: column;在列中显示项目，如果您不提供此选项，则项目将出现在单行上，如 X asix。

justify-content: space-between;在项目之间划分相等的间隙

注意：您可以增加和减少 LI 中的数字，它们会自动调整。

.wrapper {display: flex;}
ul {list-style:none; height: 250px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid; }
li {
text-align:right;
position: relative;
padding-right: 5px;
}
li:after {
content: "-";
position: absolute;
top: 50%;
right: 0;
transform: translate(60%, -50%);
}
<div class="wrapper">
<ul>
  <li>0.0005</li>
  <li>13</li>
  <li>12.44</li>
  
  <li>1</li>
  <li>.100</li>
</ul>
</div>

推荐阅读