Главная » Языки программирования

Vertical Line in html

Содержание
  1. How to Create Vertical Line in HTML
  2. 1) Using Border-Right, Height and Position CSS Property
  3. 2) Vertical line using Border-Left, Height, and Position CSS Property
  4. 3) Vertical line using hr Transform Property
  5. 4) Double Vertical line using CSS Property
  6. 5) Create Multiple Types (Double, Solid, Dashed, Dotted) Vertical Lines
  7. 8) Create Vertical Lines using Paragraph, Section and Article Containers
  8. How to create a vertical divider or separator line in HTML CSS?
  9. How to create a vertical separator line in HTML?
  10. CSS
  11. HTML
  12. Example 2: Another way to create the vertical divider
  13. HTML
  14. CSS
  15. Build HTML CSS projects
  16. Popular posts
  17. About Shihab
  18. Categories
  19. Recent comments
  20. Shihab Ul Haque
  21. HTML Vertical Lines
  22. Using Border
  23. Using Horizontal Rule
  24. Vertical Line Using Horizontal rule
  25. Vertical Line Using Border
  26. Right Vertical Line Using Border
  27. Centre Line Using Border
  28. Vertical Line Using Horizontal rule
  29. Examples
  30. Conclusion
  31. Make a vertical separator line in HTML/CSS
  32. Answer by Renata Perez
  33. Answer by Shepherd Salazar
  34. Answer by Saylor Solomon
  35. Answer by Micah Farmer
  36. Answer by Itzayana Morgan
  37. Answer by Reginald Harrington

How to Create Vertical Line in HTML

You might have a couple of reasons to create a vertical line on your web page but HTML does not have any element for vertical lines. Although HTML only have the element for a horizontal line; but still there are multiple ways to create a vertical line in HTML as mentioned below:

  • Using Border CSS Property
  • Using width and height CSS Property
  • Using hr Transform Property

Here in this article, we have explained all possible ways to create Vertical line in HTML:

Читайте также:  Больше символ в php

1) Using Border-Right, Height and Position CSS Property

        /* Applying the style on the complete body of html page */ body < text-align: center; >/* CSS to add vertical line in the right */ .verticalLine 
Vertical Line using HTML and CSS
   
using border-right, height and position property

2) Vertical line using Border-Left, Height, and Position CSS Property

        /* Applying the style on complete body of html page */ body < text-align: center; >/* CSS to add vertical line in the left */ .verticalLine 
Vertical Line using HTML and CSS
   
vertical line using border-left, height and position property

3) Vertical line using hr Transform Property

A vertical line can be created in HTML using transform property in

tag. With the help of this property, you can rotate a horizontal line to a vertical line.

        body < text-align: center; >hr 
Vertical Line using hr Transform Property

4) Double Vertical line using CSS Property

        /* Applying the style on complete body of html page */ body < text-align: center; >/* CSS to add vertical line in the right */ .verticalLine 
Vertical Line using HTML and CSS
   
double vertical line

5) Create Multiple Types (Double, Solid, Dashed, Dotted) Vertical Lines

        div.dotted < border-style: none dotted none none; margin: 10px; padding: 10px; right: 55.5%; position: absolute; >div.dashed < border-style: none dashed none none; margin: 10px; padding: 10px; right: 66%; position: absolute; >div.solid < border-style: none solid none none; margin: 10px; padding: 10px; right: 77%; position: absolute; >div.double 
Vertical Line using HTML and CSS
 
dotted vartical line.
 
dashed vartical line.
 
solid vartical line.
 
double vartical line.

8) Create Vertical Lines using Paragraph, Section and Article Containers

        body < text-align: center; >.paragraphWithVertcalLine < border-right: 1px solid #000; width: 300px; height: 300px; >.sectionWithVertcalLine < border-right: 1px solid #000; width: 300px; height: 300px; >.articleWithVertcalLine  
vertical line with paragraph container
 
vertical line with paragraph section container
 
vertical line with article container

Источник

How to create a vertical divider or separator line in HTML CSS?

Vertical separator line using HTML CSS

To create a vertical divider or separator line in HTML, you have to use the CSS border property. You have horizontal rule (

) in HTML but there is no vertical rule or tag in HTML. And this is why we need to create it differently.

Let’s see how you can do that.

How to create a vertical separator line in HTML?

Vertical separator line between two paragraphs

For the above vertical separator line, I have the following CSS.

CSS

See the HTML that will make things more clear.

HTML

Lorem, ipsum dolor sit amet consectetur adipisicing elit
 
 Dolor sit amet consectetur adipisicing elit.

As you see in the above HTML, I have a tag with a CSS class of .vr and this is why I have this name in the CSS.

In my CSS, the .vr has 1-pixel width and 2-pixel border-right . But you can use border-left as well and it will create the same look.

Example 2: Another way to create the vertical divider

Vertical divider created using CSS position property and pseudo class

You’re not limited to using the above HTML markup. And you don’t have to create a span tag in order to make a vertical line. Based on your HTML markup, you can specify a left or right border for an existing element. Such as div, section, etc.

For the above layout/screenshot, I have the following HTML markup.

HTML

Lorem, ipsum dolor sit amet consectetur adipisicing elit.
 
 
Dolor sit amet consectetur adipisicing elit.

As you see in the above code, I don’t have an empty tag or . This is just a normal web page layout.

I used a pseudo-class of ( ::before ) and CSS position property. See the CSS below.

CSS

.container < background-color: #D4FFD1; max-width: 900px; margin: 0 auto; padding: 30px; display: flex; justify-content: space-between; position: relative; >.container .item < flex-basis: 48%; background-color: #ffdcd9; padding: 10px; >.container .item-right::before

You don’t need the entire CSS to create the vertical line (as you see above). This is just to make you understand. Only the last selector creates the separator (and of course, you need the position: relative ).

Build HTML CSS projects

Do you need to hire a web developer?

Shihab, headshot

About Shihab

With over 20K monthly readers, my goal is to help small businesses to create a stunning online presence.

At the same time, I’ve been creating resources for web developers, designers & freelancers in general.

Categories

Recent comments

Yes, you can edit the code to make them center aligned. You can contact me on Skype to get customized/extra…

Hi, thank you for this. It almost helped me to achieve what I wanted. Only one problem left: I want…

Thank you, that was so helpful! Especially the ‘Extra help for non-techies and newbies’ part 🙂

You have crafted an amazing guide about the best Fiverr gig image size guide. I found it helpful while doing…

Wow great it worked like a charm. Thanks buddy

Disclosure: I accept suggestions to make improvements to any content & user experience. So if you have any, please feel free to reach out. You will find a few different contact methods on the contact page. But, I may not respond to those persons who intend to get links.

Shihab Ul Haque

You can call me Shihab. I am a web developer and have been working with PHP & WordPress a lot.
I have a master’s degree and left my regular job to fully engage with the field that I love working in. I live in Bangladesh and help business owners to create a stunning online presence.

Источник

HTML Vertical Lines

Example of HTML Vertical Lines

In a previous article, we discussed the importance and construction of horizontal lines. In this article, we will talk about vertical lines — why they are useful, and how we can construct them in multiple ways.

Vertical lines are the opposite of the

tag. Depending on your use case, you may be using them for the following (but not limited to these) options:

Let’s dive into how to draw them.

Using Border

For drawing vertical lines using borders, the most useful borders are the right and left ones. We can choose one (or two based on requirements), style the appearance, and set the alignment to fulfill our line requirements.

This is how we can get a left vertical line.

 
Vertical Line Using Border
  
 div.vertical-line < height: 50px; margin: 10px; >div.vertical-line.left

We have separated the class vertical-line for reusability in the right and center lines. For the right line, all we need to do now is

 
Right Vertical Line Using Border

And for the center, we need to position our line to 50% from the parent endpoint. The direction is dependent on what border we selected — left or right. In the following example, we use a left border.

Using Horizontal Rule

We can create vertical lines from

tags by turning the tables. All we need our

tag is to have a width much smaller than the height. While we can achieve so in HTML alone using the tag’s width and size properties, these are legacy attributes. MDN Browser Compatibility Chart clearly states that these properties are deprecated and not reliable for cross-browser implementations. Instead, it’s better to style it using CSS. More details can be found in the spec.

 
Vertical Line Using Horizontal rule

Vertical Line Using Border

Right Vertical Line Using Border

Centre Line Using Border

Vertical Line Using Horizontal rule

body < font-family: sans-serif; >div.vertical-line < height: 50px; margin: 10px; >div.vertical-line.left < border-left: 3px solid #48abe0; >div.vertical-line.right < border-right: 3px solid #48abe0; >div.vertical-line.centre < border-left: 3px solid #48abe0; position: relative; left: 50%; >hr

This was a fundamental example. Let’s take a look at some enhanced versions.

Examples

This codepen demonstrates a vertical line by creating a subtle gradient with box-shadow.

This codepen integrates vertical lines into bootstrap columns with number icons.

We can create even a zigzag line.

Conclusion

Vertical Separators / Lines are handy elements. We can construct them either using borders or by turning tables on the dimensions of the horizontal rule

.

UnusedCSS helps website owners remove their unused CSS every day. See how much you could save on your website:

You Might Also Be Interested In

Источник

Make a vertical separator line in HTML/CSS

Example 1: It creates a vertical line using border-left, height and position property. ,Example 2: It creates a vertical line using border-left and height property. ,To make a vertical line, use border-left or border-right property. The height property is used to set the height of border (vertical line) element. Position property is used to set the position of vertical line.,How to make a vertical line using HTML ?

Answer by Renata Perez

Method: You load a line image. Then you set its style like «height: 100px ; width: 2px» ,Method: You can use

tags X

,You can use the horizontal rule tag to create vertical lines.,Style the border if you want 3D look:

Answer by Shepherd Salazar

You can use the CSS border property on a element in combination with the other CSS property like display and height property to make vertical lines in HTML.,The following example will create a vertical separator line between two images. You can further increase the height of the line by simply increasing the value of the height property.,How to add border to an element on mouse hover without affecting the layout in CSS,Is this website helpful to you? Please give us a like, or share your feedback to help us improve. Connect with us on Facebook and Twitter for the latest updates.

     .vertical-line  Club Card

Answer by Saylor Solomon

How to Add a Vertical Line in HTML ,In our last example, we add a vertical line before a text.,To center a vertical line, set the position property to “absolute”.,In this snippet, you can see how to add a vertical line in HTML. But you need to use CSS, as well. Add a vertical line on the left or right side by using the border-left or border-right properties, respectively. See also how to center a vertical line and how to add a vertical line before a text.

    .verticalLine 
Example of a vertical ine

Answer by Micah Farmer

First, you need to normalize the default border and margin properties added by the browser.,Next, the width, style, and color of the vertical line is set using the shorthand border-left property, while the height property will set the height of the vertical line.,If you need to add the vertical line on the side of another element, you can use either the border-left or border-right property with the attached element.,The float:left property is added so that the vertical line can be displayed on the left side of another element.

Answer by Itzayana Morgan

Using CSS Flexbox, we can easily make vertical line dividers that can expand and fill the parent container. First, let’s start with a basic horizontal rule between two paragraphs.,First, we make the div container a flex parent. This style will default the container items to flex-direction: row, which will place each item side by side.,Once our items are displayed horizontally, we can adjust our hr to expand vertically. Using a combination of min-height and max-height, we can fill the div. Min height of 100% will expand while the max height using 100vh will limit the hr not to grow more than the viewport height.,No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Using CSS Flexbox, we can easily make vertical line dividers that can expand and fill the parent container. First, let’s start with a basic horizontal rule between two paragraphs.

 
some text conent
 
some text conent

To style our horizontal rule to a vertical style, we need to write some CSS for the parent div and the hr element.

First, we make the div container a flex parent. This style will default the container items to flex-direction: row , which will place each item side by side.

Answer by Reginald Harrington

It is very easy to add vertical line to the content like horizontal line.,There is no need to add CSS file, you can add left or right vertical line using class. Use following code to add vertical line with your content.,Here you can add line on the left side, right side, top of the text and bottom of the text.,Change the border style with right, left, top or bottom.

Источник

Оцените статью