Is there a vr (vertical rule) in html?

后端未结

关注

 28  2030

I know there is a hr (horizontal rule) in html, but I don\'t believe there is a vr (vertical rule). Am I wrong and if not, why isn\'t there a vertical rule?

相关标签:

28条回答

悲&欢浪女

2020-12-02 12:15

<style type="text/css">
.vr
{
  display:inline;
  height:100%;
  width:1px;
  border:1px inset;
  margin:5px
}
</style>

<div style="font-size:50px">Vertical Rule: &rarr;<div class="vr"></div>&larr;</div>

Try it out.

0 讨论(0)

执念已碎

2020-12-02 12:16

An <hr> inside a display:flex will make it display vertically.

JSFiddle: https://jsfiddle.net/w6y5t1kL/

Example:

<div style="display:flex;">
  <div>
    Content
    <ul>
      <li>Continued content...</li>
    </ul>
  </div>
  <hr>
  <div>
    Content
    <ul>
      <li>Continued content...</li>
    </ul>
  </div>
</div>

0 讨论(0)

礼貌的吻别

2020-12-02 12:16

You could use the new HTML5 SVG tag:

<svg style="position:absolute;width:100%;height:100%;">
    <line id="myVerticalLine" y1="0" y2="100" x1="0" x2="0">
    </line>
</svg>

0 讨论(0)

无人共我

2020-12-02 12:17

There is not.

Why? Probably because a table with two columns will do.

0 讨论(0)
发布评论:

提交评论
- 加载中...

忘掉有多难

2020-12-02 12:19

Ancient question but I solved this with display:flex; and it works great:

<div style="display:flex;border:1px dotted black;margin-bottom:20px;">
    <div>
        This is a div
    </div>
    <div style="border-left:1px solid black;margin:0 7.5px;"></div>
    <div>
        This is another div
    </div>  
</div>

https://jsfiddle.net/6qfd59vm/3/

This solution also doesn't require fixed height.

0 讨论(0)

萌比男神i

2020-12-02 12:19
You can very easily do this by
```
hr{
 transform: rotate(90deg);
}
```
```
<html>
<head>
</head>
<body>
<hr>
</body> 
</html>
```
Be careful about the height and width of hr
0 讨论(0)
发布评论:

提交评论
- 加载中...