如何使用HTML制作垂直线？

评论

W3不能更智能并为
添加规格

#1 楼

在要显示该行的标记附近放置一个<div>，并使用CSS对其进行样式设置：




 .verticalLine {
  border-left: thick solid #ff0000;
} 

 <div class="verticalLine">
  some other content
</div>




评论

将样式与内容相结合并不是很多人的忌讳。
我无话可说


–ctpenrose
2013年4月2日23:40


@ctpenrose确实不是禁忌，但是将它们分开很方便，因为如果需要，您可以轻松地将其调整到一个位置。另外，将其放在单独的CSS文件中也可以提高性能，因为它可以由浏览器缓存，并且每次请求渲染的HTML时，最终都会通过网络传输更少的字节。

– Kris van der Mast
13年4月3日在15:28

#2 楼

您可以使用水平尺标记创建垂直线。




 <hr width="1" size="500">





通过使用最小的宽度和较大的尺寸，水平线成为垂直线。

评论

先生，先生那是一个很酷的把戏。仍然需要将其设置为display：inline-block，否则它不会很好地放置在其他内联元素旁边。

– Alex W
2014年1月7日在21:43
不过，我认为这不适用于Firefox。这条线在那里，但似乎看不见...

–爱德
2014年1月21日，12：16


感谢您的代码。这是此jsfiddle.net/ccatto/c8RQc的工作示例jsfiddle

–Catto
14年6月17日在20:20
Giulio，因为它实际上并未将屏幕分为两列。同样，您需要使用一些CSS职员才能获得理想的结果，就像div一样。

– Ismail Sahin
2014年11月30日20:21在
我更好地喜欢它，因为它避免了仅在其一侧具有可见边框的情况下隐藏div的怪异。当然，这不是您通常使用hr的方式，但对我来说仍然更有意义。

– levininja
16-10-12在19:24


#3 楼

您可以使用空的<div>，其样式与您希望该行显示的样式完全相同：

HTML：

 <div class="vertical-line"></div>


具有精确的高度（在线替代样式）：




   div.vertical-line{
      width: 1px; /* Line width */
      background-color: black; /* Line color */
      height: 100%; /* Override in-line if you want specific height. */
      float: left; /* Causes the line to float to left of content. 
        You can instead use position:absolute or display:inline-block
        if this fits better with your design */
    } 

 <div class="vertical-line" style="height: 45px;"></div>





如果想要3D外观，请设置边框样式：




     div.vertical-line{
      width: 0px; /* Use only border style */
      height: 100%;
      float: left; 
      border: 1px inset; /* This is default border style for <hr> tag */
    } 

    <div class="vertical-line" style="height: 45px;"></div>





您当然也可以尝试高级组合：




   div.vertical-line{
      width: 1px;
      background-color: silver;
      height: 100%;
      float: left;
      border: 2px ridge silver ;
      border-radius: 2px;
    } 

  <div class="vertical-line" style="height: 45px;"></div>




评论

+1这个解决方案很好，因为它很容易针对不同需求进行定制

–范库什
2014-09-27 21:59

#4 楼

您还可以使用HTML水平线制作垂直线<hr /> 




 html, body{height: 100%;}

hr.vertical {
  width: 0px;
  height: 100%;
  /* or height in PX */
} 

 <hr class="vertical" />




评论

获得与标准
相同的线条样式的绝妙技巧。可能还需要额外的样式才能在内容的侧面浮动（例如：float：left;）

–敬畏
2013年7月30日9:00


此“垂直”规则仍像正常水平规则一样垂直分隔（文本）元素。

– Qwerty
17年11月30日在8:34


#5 楼

没有垂直于<hr>元素的元素。但是，您可能要尝试的一种方法是在要分隔的内容的左侧或右侧使用简单的边框：




 #your_col {
  border-left: 1px solid black;
} 

 <div id="your_col">
  Your content here
</div>




#6 楼

HTML5自定义元素（或纯CSS）

1。 javascript
注册您的元素。
var vr = document.registerElement('v-r'); // vertical rule please, yes!

*在所有自定义元素中，-是必填项。
2。 *您可能需要对display:inline-block|inline进行一些调整，因为inline不会扩展到包含元素的高度。使用边距将线在容器内居中。
3。实例化
v-r {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

*很遗憾，您无法创建自定义的自动关闭标签。
用法
js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>


示例：http：// html5。 qry.me/vertical-rule

不想弄乱JavaScript？
只需将此CSS类应用于您指定的元素。
css 
 <h1>THIS<v-r></v-r>WORKS</h1>

/> *请参阅上面的说明。

评论

对于这些限制感到遗憾，但是在其他一些地方这看起来确实非常有用。

– Smar
16 Jun 9 '16 at 11:07
它不能填满所有div大小怎么解决？

–奥塔维奥·巴雷托（OtávioBarreto）
17年4月27日在19:30
@OtávioBarreto您可能需要摆弄注释的显示属性。将其设置为内联或内联块。请参阅上面的注释和示例网址。

– Qwerty
17年4月28日在8:00


#7 楼

另一种选择是使用1像素的图像，并设置高度-此选项将使您可以将其浮动到需要的位置。

虽然不是最优雅的解决方案。 >

评论

这种方法没有错，实际上他们在jquery网站上使用了它

–斯蒂芬·默多克
2010年6月30日17:51

#8 楼

您可以通过将高度/宽度与任何html元素一起使用来绘制垂直线。




 #verticle-line {
  width: 1px;
  min-height: 400px;
  background: red;
} 

 <div id="verticle-line"></div>




#9 楼

没有任何标签可以在HTML中创建垂直线。


方法：加载线条图像。然后将其样式设置为"height: 100px ; width: 2px"
方法：可以使用<td>标签<td style="border-left: 1px solid red; padding: 5px;"> X </td>


#10 楼

您可以使用hr（水平线）标签，然后使用以下CSS将其旋转90度。

br />

评论

这将破坏所有待命的文本或元素。

– Qwerty
16 Dec 8'在9:28

#11 楼

我使用了建议的“ hr”代码的组合，这是我的代码的样子：

定位它。 （我使用垂直线来排列网页上的内容，然后将其删除。）

#12 楼

我想创建一条以div为中心的垂直线，我认为您可以使用此代码。
我想，“容器”的宽度很可能是100％。




 div.container {
  width: 400px;
}

div.vertical-line {
  border-left: 1px solid #808080;
  height: 350px;
  margin-left: auto;
  margin-right: auto;
  width: 1px;
} 

 <div class="container">
  <div class="vertical-line">&nbsp;</div>
</div>




评论

最好的Answear，其他所有东西都卡在左侧或右侧。谢谢！

–阿卜杜勒哈迪·拉鲁（Abdelhadi Lahlou）
19年3月1日在9:16

#13 楼

水平线有一个<hr>标签。它也可以与CSS一起使用以制作水平线：




 .divider{
    margin-left: 5px;
    margin-right: 5px;
    height: 100px;
    width: 1px;
    background-color: red;
} 

 <hr class="divider">





width属性确定线条的粗细。 height属性确定线的长度。 background-color属性确定线条的颜色。

#14 楼

为什么不使用＆＃124，它是|
的html特殊字符。

评论

因为它不是垂直线

–OverCoder
16年8月22日在20:47

#15 楼

如果您的目标是在容器中放置垂直线以分隔并排的子元素（列元素），则可以考虑如下设计容器的样式：

.container > *:not(:first-child) {
  border-left: solid gray 2px;
}


这将从第二个子元素开始为所有子元素添加左边框。换句话说，您在相邻子级之间获得了垂直边框。




>是子级选择器。它与左侧指定的元素的任何子元素匹配。

*是通用选择器。它匹配任何类型的元素。

:not(:first-child)表示它不是其父元素的第一个子元素。

浏览器支持：> *：first-child和：not（）

我认为这比简单的.child-except-first {border-left: ...}规则要好，因为垂直线来自容器的规则而不是来自不同子元素的规则更有意义。

这是否比使用临时的垂直规则元素更好（通过设置水平规则等）取决于您的用例，但这至少是一种选择。

#16 楼

可能还有另一种方法：使用SVG。例如：

您可以具有任意长度和方向的线。
您可以轻松指定宽度和颜色

现代浏览器。但是某些旧版浏览器（例如IE 8和更早版本）不支持它。


#17 楼

垂直于div的垂直线




     <div style="width:50%">
        <div style="border-right:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>





垂直线距div 




     <div style="width:50%">
        <div style="border-left:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>




#18 楼

要添加垂直线，您需要设置hr的样式。

现在，当您创建垂直线时，它将出现在页面的中间：

<hr style="width:0.5px;height:500px;"/>


现在将其放在您想要的位置，您可以使用以下代码：

<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>


将其放置在左侧，您可以将其反转以将其放置在右边。

#19 楼

在要应用垂直行的上一个元素中，可以设置CSS ... 

border-right-width: thin;
border-right-color: black;
border-right-style: solid;


#20 楼

将<hr>旋转90度：




 <hr style="width:100px; transform:rotate(90deg);">




#21 楼

对于内联样式，我使用以下代码：

<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />


，并将其直接放置在中心。

#22 楼

我需要一个内联垂直线，所以我欺骗了一个按钮使其变成一条线。

<button type="button" class="v_line">l</button>

.v_line {
         width: 0px;
         padding: .5em .5px;
         background-color: black;
         margin: 0px; 4px;
        }


#23 楼

要使垂直线居中居中，请使用：

position: absolute; 
left: 50%;


评论

他问如何制作垂直线，而不是如何使垂直线居中

–猎犬
2015年9月24日10:36在