Home / tạo đường kẻ dọc trong html

Tạo đường kẻ dọc trong html

Admin 21/08/2021 828

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.vertical-line{ width: 0px; /* Use only border style */ height: 100%; float: left; border: 1px inset; /* This is default border style for tag */ } div.vertical-line{ width: 1px; background-color: silver; height: 100%; float: left; border: 2px ridge silver ; border-radius: 2px; } Không có chiều dọc tương đương với phần tử . Tuy nhiên, một cách tiếp cận bạn có thể muốn thử là sử dụng đường viền đơn giản ở bên trái hoặc bên phải của bất cứ thứ gì bạn đang tách:

HTML5 các yếu tố tùy chỉnh (hoặc CSS thuần)

1. javascript
Đăng ký yếu tố của bạn.Bạn đang xem: Tạo đường kẻ dọc trong html
var vr = document.registerElement("v-r"); // vertical rule please, yes! * - là bắt buộc trong tất cả các yếu tố tùy chỉnh.
2. css
v-r { height: 100%; width: 1px; border-left: 1px solid gray; /*display: inline-block;*/ /*margin: 0 auto;*/} * Bạn có thể cần mân mê một chút với display:inline-block|inline vì inline sẽ không mở rộng để chứa chiều cao của phần tử. Sử dụng lề để căn giữa dòng trong một container.
3. khởi tạo
js: document.body.appendChild(new vr());orHTML: * Thật không may, bạn không thể tạo các thẻ tự đóng tùy chỉnh.
sử dụng
THISWORKS

ví dụ: http://html5.qry.me/vertical-rule
Bạn không muốn gây rối với javascript?
Đơn giản chỉ cần áp dụng lớp CSS này cho phần tử được chỉ định của bạn.
Bạn đang xem: Tạo đường kẻ dọc trong html
css
.vr { height: 100%; width: 1px; border-left: 1px solid gray; /*display: inline-block;*/ /*margin: 0 auto;*/} * Xem ghi chú ở trên.
15 29 thg 7, 2015QwertyMột tùy chọn khác là sử dụng hình ảnh 1 pixel và đặt chiều cao - tùy chọn này sẽ cho phép bạn di chuyển nó đến nơi bạn cần.
Không phải là giải pháp thanh lịch nhất mặc dù.
9 30 thg 6, 2010chrisKhông có bất kỳ thẻ nào để tạo một đường thẳng đứng trong HTML.
Phương pháp: Bạn tải một hình ảnh dòng. Sau đó, bạn đặt kiểu của nó như "height: 100px ; width: 2px"
Phương pháp: Bạn có thể sử dụng thẻ X
5 30 thg 6, 2010onurbaysanTôi đã sử dụng kết hợp mã "hr" được đề xuất và đây là mã của tôi trông như thế nào:
Tôi chỉ đơn giản là thay đổi giá trị của giá trị pixel "bên trái" để định vị nó. (Tôi đã sử dụng dòng dọc để sắp xếp nội dung trên trang web của mình và sau đó tôi đã xóa nội dung đó.)
4 28 thg 12, 2013GuyĐể tạo một đường thẳng đứng tập trung bên trong div tôi nghĩ bạn có thể sử dụng mã này. "Container" có thể có chiều rộng 100%, tôi đoán vậy.
Xem thêm: Tại Sao Bị Lỗi Đánh Số Trang Không Liên Tục Trong Word 2010, Không Đánh Được Số Trang Trong Word
div.container { width: 400px;}div.vertical-line { border-left: 1px solid #808080; height: 350px; margin-left: auto; margin-right: auto; width: 1px;} 4 21 thg 1, 2014EddBạn có thể sử dụng thẻ hr (đường ngang) và xoay nó 90 độ với css bên dưới
hr { transform:rotate(90deg); -o-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg);}http://jsfiddle.net/haykaghabekyan/0c969bm6/1/
4 4 thg 9, 2014Hayk AghabekyanTại sao không sử dụng & # 124, ký tự đặc biệt html cho |
ví dụ :
Sorry, your browser does not support inline SVG.Ưu điểm:
Bạn có thể có bất kỳ chiều dài và định hướng.Bạn có thể chỉ định chiều rộng, màu sắc dễ dàng
Nhược điểm:
SVG hiện được hỗ trợ trên hầu hết các trình duyệt hiện đại. Nhưng một số trình duyệt cũ (như IE 8 trở lên) không hỗ trợ nó.
3 16 thg 2, 2016SachinBạn có thể vẽ một đường thẳng đứng bằng cách sử dụng chiều cao/chiều rộng với bất kỳ phần tử html nào.
#verticle-line { width: 1px; min-height: 400px; background: red;} 3 30 thg 3, 2016Aamir ShahzadNếu mục tiêu của bạn là đặt các đường thẳng đứng trong một thùng chứa để tách các phần tử con cạnh nhau (các phần tử cột), bạn có thể xem xét việc tạo kiểu cho thùng chứa như thế này:
.container > *:not(:first-child) { border-left: solid gray 2px;}Điều này thêm một đường viền bên trái cho tất cả các yếu tố con bắt đầu từ đứa trẻ thứ 2. Nói cách khác, bạn có được đường viền dọc giữa những đứa trẻ liền kề.
> là một bộ chọn con. Nó phù hợp với bất kỳ phần tử con nào được chỉ định ở bên trái.* là một bộ chọn phổ quát. Nó phù hợp với một yếu tố của bất kỳ loại.:not(:first-child) có nghĩa nó không phải là con đầu lòng của cha mẹ.
Hỗ trợ trình duyệt: > *: con đầu lòng và : không ()
Việc này có tốt hơn việc sử dụng phần tử quy tắc dọc tạm thời (bằng cách tạo kiểu cho quy tắc ngang, v.v.) sẽ tùy thuộc vào trường hợp sử dụng của bạn, nhưng ít nhất đây là một cách thay thế.