Có một đường thẳng đứng trong HTML không?

Question

Mũi tên HTML cung cấp tất cả các mã biểu tượng html mà bạn cần để đơn giản hóa thiết kế trang web của mình. Mũi tên HTML được chia sẻ bởi Toptal Designers, thị trường tuyển dụng các nhà thiết kế UI, UX và Visual ưu tú, cùng với các nhà phát triển tài chính và nhà phát triển hàng đầu. Khám phá lý do tại sao các công ty hàng đầu và công ty khởi nghiệp chuyển sang Toptal để thuê các nhà thiết kế tự do cho các dự án quan trọng của họ

Tiếp theo, chiều rộng, kiểu và màu của đường thẳng đứng được đặt bằng cách sử dụng thuộc tính tốc ký border-left, trong khi thuộc tính height sẽ đặt chiều cao của đường thẳng đứng

Thuộc tính

<body>
  <hr class="vertical" />
  <p>Hello Worldp>
body>

0 được thêm vào để có thể hiển thị đường thẳng đứng ở phía bên trái của phần tử khác

Đánh dấu HTML sau đây

<body>
  <hr class="vertical" />
  <p>Hello Worldp>
body>

Sẽ tạo ra đầu ra sau

HTML vertical line of the left side Đường thẳng đứng HTML bên trái

Ngoài ra, bạn cũng có thể xóa thẻ

và tạo một đường thẳng đứng bằng cách thêm thuộc tính border-left hoặc

<body>
  <hr class="vertical" />
  <p>Hello Worldp>
body>

3 vào bất kỳ phần tử nào mà bạn muốn có một đường thẳng đứng

Ví dụ: đây là cách thêm một đường thẳng đứng ở bên phải của thẻ

<body>
  <hr class="vertical" />
  <p>Hello Worldp>
body>

4

p.vertical-right {
  border-right: 5px solid blue;
  height: 50px;
}

Ví dụ dưới đây

<body>
  <p class="vertical-right">Hello Worldp>
  <p class="vertical-right">Goodbye Worldp>
body>

Sẽ tạo ra đầu ra sau

HTML vertical line of the right side Đường thẳng đứng HTML bên phải

Bạn sẽ cần điều chỉnh kiểu CSS tùy thuộc vào ngữ cảnh và nơi bạn muốn đặt đường thẳng đứng. Nhưng một đường thẳng đứng luôn có thể được tạo bằng cách sử dụng thẻ

Nếu bạn cần thêm đường thẳng đứng ở cạnh của phần tử khác, bạn có thể sử dụng thuộc tính border-left hoặc

<body>
  <hr class="vertical" />
  <p>Hello Worldp>
body>

3 với phần tử được đính kèm

programming html

Có một đường thẳng đứng trong HTML không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội