今天是可能的 CSS3
CSS3
hr { background-color:black; color:black; -webkit-transform:rotate(90deg); position:absolute; width:100px; height:2px; left:100px; }
HTML中没有标记,但您可以使用|。
不,那里没有。我会告诉你一个关于它为什么不是的故事。但首先, 的 快速解决方案 强>
的 a)使用CSS类作为基本元素 span / div ,例如: <span class="vr"></span> : 强>
span
div
<span class="vr"></span>
.vr{ display: inline-block; vertical-align: middle; /* note that height must be precise, 100% does not work in some major browsers */ height: 100px; width: 1px; background-color: #000; }
演示使用=&gt; https://jsfiddle.net/fe3tasa0/
的 b)使用单侧边框 强> 可能还有CSS :first-child 选择器,如果你想在兄弟/邻居元素之间应用一般分隔符。
:first-child
<vr>
这里的许多答案都表明,垂直分隔符不适合原始的HTML范例/方法 的 ......这是完全错误的。 强> 答案也很自相矛盾。
那些相同的人可能正在调用他们清晰的CSS类“clearfix” - 没有什么可以解决浮动,你只是清除它... HTML3中甚至有一个元素: <clear> 。可悲的是,这和浮动的清除是少数常见的误解之一。
<clear>
无论如何。在“原始HTML时代”中的“当时”,没有想过类似的东西 inline-block ,只有 的 blocks 强> , 的 inlines 强> 和 的 tables 强> 。
inline-block
blocks
inlines
tables
最后一个实际上是原因 <vr> 不存在。 的 那时候假设: 强> 如果你想垂直划分某些东西和/或从左到右制作更多的块=&gt; =&GT;你正在制作/想要制作列=&gt; =&GT;这意味着你正在创建一个表=&gt; =&GT;表格在其单元格之间具有自然边界=&gt; 的 没理由做一个 <vr> 强>
这种方法实际上仍然有效,但是随着时间的推移,表格的语法并不适用于所有情况以及它的默认样式。
正如其他人所指出的,垂直规则的概念不符合HTML文档结构和表示背后的原始思想。然而,现在(特别是随着web-apps的激增),有一些场景确实很有用。
例如,考虑固定在屏幕顶部的水平导航菜单,类似于大多数窗口GUI应用程序中的菜单栏。您有几个从左到右排列的顶级菜单项,当点击打开下拉菜单时。多年前,通常的做法是使用单行表创建它,但这是糟糕的HTML,并且人们普遍认为正确的方法是使用大量自定义CSS的列表。
现在,假设您要对类似的项目进行分组,但在组之间添加一个垂直分隔符,以实现以下目的:
[Item 1a] [Item 1b] | [Item 2a] [Item 2b]
运用 <hr style="width: 1px; height: 100%; ..." /> 工作,但可能会被认为在语义上不正确,因为您正在更改该元素的实际用途。此外,您不能在HTML DTD仅允许内联级元素(例如,在...中)的某些元素中使用它 <span> 元件)。
<hr style="width: 1px; height: 100%; ..." />
<span>
一个更好的选择是 <span style="display: inline-block; width:1px; height:100%; background:#000; margin: 0 2px;"></span> 但是并非所有浏览器都支持 display: inline-block; CSS属性,所以唯一真正的内联级选项是使用如下图像:
<span style="display: inline-block; width:1px; height:100%; background:#000; margin: 0 2px;"></span>
display: inline-block;
<img src="pixel.gif" alt="|" style="width:1px; height:100%; background:#000; margin: 0 2px;" />
这具有与仅文本浏览器(如lynx)兼容的附加优点,因为显示管道字符而不是图像。 (令我很生气的是M $ IE错误地使用alt文本作为工具提示;这就是title属性的用途!)
我知道我很晚才补充我的答案,但我相信这是值得的。您可以使用垂直线 flex 和 hr
flex
hr
看我的 codepen在这里 。
没有,它会去哪里?
如果你想要这样的东西,使用CSS在一个元素上放置一个右边框。
您可以使用新的HTML5 SVG标记:
<svg style="position:absolute;width:100%;height:100%;"> <line id="myVerticalLine" y1="0" y2="100" x1="0" x2="0"> </line> </svg>
怎么样:
writing-mode:tb-rl
top-&gt; bottom,right-&gt; left?
我们需要垂直规则。
我觉得很容易做到 一条线的图像 ,然后将其作为“规则”插入代码中,根据需要设置宽度和/或高度。这些都是水平规则图像,但没有什么能阻止我(或你)使用“垂直规则”图像。
这很酷很多原因;你可以轻松地使用不同的线条,颜色或图案作为“规则”,并且因为它们没有文本,即使你在HTML中使用hr的“正常”方式,它也不应该影响SEO或其他类似的东西那。图像文件将/应该非常小(最多1或2KB)。
尝试一下,你会知道自己:
<body> rokon<br /> rkn <hr style="width: 1px; height: 10px; display: inline; margin-left: 2px; margin-right: 2px;" />rockon<br /> rocks </body> </html>
注册你的元素。
var vr = document.registerElement('v-r'); // vertical rule please, yes!
*本 - 是所有自定义元素中必需的。
-
v-r { height: 100%; width: 1px; border-left: 1px solid gray; /*display: inline-block;*/ /*margin: 0 auto;*/ }
*你可能需要摆弄一下 display:inline-block|inline 因为 inline 不会扩展到包含元素的高度。使用边距将线条置于容器中心。
display:inline-block|inline
inline
js: document.body.appendChild(new vr()); or HTML: <v-r></v-r>
*遗憾的是,您无法创建自定义自关闭标记。
<h1>THIS<v-r></v-r>WORKS</h1>
例: http://html5.qry.me/vertical-rule
只需将此CSS类应用于指定的元素即可。
.vr { height: 100%; width: 1px; border-left: 1px solid gray; /*display: inline-block;*/ /*margin: 0 auto;*/ }
*见上面的注释。 链接到 关于SO的原始答案 。
那没有。
为什么?可能是因为有两列的表会做。
您可以使用css模拟垂直线,并使用div上的类
.vhLine { border-left: thick solid #000000; }
由于内容布局的排版性质,HTML几乎没有垂直定位。垂直规则只是不符合它的语义。
您可以创建自定义标记:
<html> <head> <style> vr { display: inline-block; // This is where you'd set the ruler color background-color: black; // This is where you'd set the ruler width width: 2px; //this is where you'd set the spacing between the ruler and surrounding text margin: 0px 5px 0px 5px; height: 100%; vertical-align: top; } </style> </head> <body> this is text <vr></vr> more text </body> </html>
(如果有人知道我可以将其变成“开放式”标签的方式,比如说 <hr> 让我知道,我将编辑它)
<hr>
你可以很容易地做到这一点
hr{ transform: rotate(90deg); }
<html> <head> </head> <body> <hr> </body> </html>
试试这个。
你可以设置高度和宽度“ 的 DIV 强> “,就像”的范围“ 的 小时 强> ”。
边际“ 的 小时 强> “用于对齐。
<div style="display: inline-flex; width: 25px; height: 100px;"> <hr style="margin: 0px 0px 0px 12.5px;"> </div>
古代的问题,但我解决了这个问题 display:flex; 它很棒:
display:flex;
<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/
该解决方案也不需要固定高度。
您可以制作这样的垂直规则: <hr style="width: 1px; height: 20px; display: inline-block;">
<hr style="width: 1px; height: 20px; display: inline-block;">
<div style="width:1px;background-color:red;height:30px;float:right;"></div>
可以使用这样的div轻松完成
在用作导航的列表项的上下文中,&lt; vr /&gt;标签将非常有用。它不存在的原因是因为“十年前在HTML的上下文中”拥有一个“没有逻辑意义”。
要在大多数桌面客户端的HTML电子邮件中使用,您必须使用表。在这种情况下,您可以使用 <hr> 标记,具有必要(但简单)的内联样式,如:
<hr width="1" size="50">
当然,使用CSS的样式更灵活,但GMail和类似的不允许使用除内联之外的任何CSS样式...
对于那些试图为文本制作专栏的人来说,有一个 列治 你应该考虑使用的财产!
.content{ margin: 20px 5%; padding: 5px; } .content p{ -webkit-column-count: 3; -moz-column-count:3; -o-column-count:3; column-count: 3; -webkit-column-rule: 1px solid #ccc; -moz-column-rule: 1px solid #ccc; -o-column-rule: 1px solid #ccc; column-rule: 1px solid #ccc; text-align: justify; }
<div class="content"> <p> Lorizzle ipsum tellivizzle sit amizzle, consectetizzle adipiscing elit. Nullam away things, shizznit stuff, suscipizzle shiz, gravida vizzle, funky fresh. Doggy phat tortizzle. Check it out its fo rizzle. Bizzle izzle shizzle my nizzle crocodizzle dapibus turpizzle tempizzle i'm in the shizzle. Mauris gizzle nibh et ghetto. Vestibulum ass phat. Pellentesque eleifend nizzle nisi. Fo shizzle my shizz shiznit fo shizzle dizzle. Donec dapibus. That's the shizzle uhuh ... yih! urna, pretium eu, mattizzle cool, shit things, nunc. Fizzle suscipizzle. Shizzlin dizzle semper daahng dawg boofron bow wow wow. </p> </div>
不,没有纵向规则。
拥有一个没有逻辑意义。 HTML是按顺序解析的,这意味着您可以从上到下,从左到右的方式布局HTML代码,从左到右,从左到右(通常)
vr标签不遵循该范例。
但是,这很容易使用CSS。例如:
<div style="border-left:1px solid #000;height:500px"></div>
请注意,您需要指定高度或使用内容填充容器。
过于复杂的答案太多了。只需创建一个TableData标记,该标记跨越您希望使用rowspan的行数。然后使用右边框作为实际条形图。
例:
<td rowspan="5" style="border-right-color: #000000; border-right-width: thin; border-right-style: solid"> </td> <td rowspan="5"> </td>
确保第二行中的“&amp; nbsp”与第一行中的“&amp; nbsp”行数相同。这样两者之间就有了适当的间距。
这项技术对我在HTML5中的时间非常有用。