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

      746

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-bloông xã 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 mặc định 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 tất cả chiều dọc củ tương đương với phần tử . Tuy nhiên, một giải pháp tiếp cận chúng ta có thể mong thử là áp dụng mặt đường viền dễ dàng ở phía bên trái hoặc mặt cần của bất cứ máy gì nhiều người đang tách:

HTML5 những nhân tố thiết lập (hoặc CSS thuần)

 
*

1. javascript

Đăng cam kết nhân tố của chúng ta.quý khách hàng sẽ xem: Tạo đường kẻ dọc vào html

var vr = document.registerElement("v-r"); // vertical rule please, yes! * - là cần vào toàn bộ những 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 hoàn toàn có thể nên mân mê một ít với display:inline-block|inline bởi vì inline sẽ không còn mở rộng nhằm cất độ cao của phần tử. Sử dụng lề để căn uống thân cái trong một container.

3. khởi tạo

js: document.body toàn thân.appendChild(new vr());orHTML: * Thật không may, chúng ta quan trọng chế tác các thẻ từ đóng góp tùy chỉnh.

sử dụng

THISWORKS 

*

ví dụ: http://html5.qry.me/vertical-rule

quý khách không muốn gây phá với javascript?

Đơn giản chỉ cần áp dụng lớp CSS này cho thành phần được hướng đẫn của công ty.

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ú nghỉ ngơi trên.

15 29 thg 7, 2015QwertyMột tùy chọn khác là sử dụng hình hình họa 1 px cùng đặt độ cao - tùy lựa chọn này đã chất nhận được chúng ta dịch chuyển nó mang đến khu vực bạn cần.

Không đề xuất là phương án tkhô nóng định kỳ độc nhất tuy vậy.

9 30 thg 6, 2010chrisKhông có bất kỳ thẻ như thế nào để sản xuất một đường trực tiếp đứng vào HTML.

Phương pháp: Bạn mua một hình ảnh dòng. Sau đó, chúng ta đặt kiểu dáng của nó như "height: 100px ; width: 2px"

Phương thơm pháp: quý khách có thể sử dụng thẻ X

5 30 thg 6, 2010onurbaysanTôi đã áp dụng phối hợp mã "hr" được lời khuyên và đấy là mã của tôi trông như vậy nào:

Tôi chỉ đơn giản dễ dàng là thay đổi quý giá của quý hiếm pixel "mặt trái" để xác định nó. (Tôi đã áp dụng chiếc dọc để thu xếp văn bản trên trang web của chính bản thân mình và tiếp nối tôi vẫn xóa nội dung đó.)

4 28 thg 12, 2013GuyĐể chế tạo một đường thẳng đứng tập trung bên phía trong div tôi nghĩ chúng ta có thể áp dụng mã này. "Container" hoàn toàn có thể gồm chiều rộng 100%, tôi đoán thù 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, 2014EddQuý khách hàng rất có thể áp dụng thẻ hr (con đường ngang) và luân chuyển 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 ko thực hiện & # 124, ký từ bỏ quan trọng đặc biệt html mang lại |

ví dụ :

Sorry, your browser does not tư vấn inline SVG.Ưu điểm:

Quý Khách rất có thể gồm bất kỳ chiều lâu năm và kim chỉ nan.Quý Khách có thể hướng đẫn chiều rộng lớn, màu sắc dễ dàng dàng

Nhược điểm:

SVG hiện nay được cung cấp trên hầu như các trình coi ngó văn minh. Nhưng một vài trình chuyên chú cũ (nhỏng IE 8 trở lên) ko cung cấp nó.

3 16 thg 2, 2016Sachinquý khách có thể vẽ một con đường thẳng đứng bằng cách thực hiện chiều cao/chiều rộng lớn với bất kỳ bộ phận html nào.

#verticle-line width: 1px; min-height: 400px; background: red; 3 30 thg 3, 2016Aamir ShahzadNếu kim chỉ nam của bạn là đặt những đường trực tiếp đứng trong một thùng cất nhằm tách bóc các thành phần nhỏ cạnh nhau (các thành phần cột), bạn có thể để ý vấn đề chế tạo ra kiểu đến thùng chứa như thế này:

.container > *:not(:first-child) border-left: solid gray 2px;Như vậy thêm một mặt đường viền phía bên trái mang lại toàn bộ những yếu tố bé bắt đầu tự đứa ttốt thứ 2. Nói biện pháp khác, các bạn đạt được con đường viền dọc giữa những đứa trẻ ngay cạnh.

> là 1 bộ lựa chọn nhỏ. Nó tương xứng cùng với bất kỳ bộ phận bé làm sao được chỉ định và hướng dẫn sống phía trái.* là 1 trong những bộ lựa chọn phổ thông. Nó tương xứng với 1 nhân tố của bất kỳ một số loại.:not(:first-child) có nghĩa nó chưa hẳn là con đầu lòng của phụ huynh.

Hỗ trợ trình duyệt: > *: con đầu lòng với : ko ()

Việc này có giỏi rộng bài toán sử dụng phần tử quy tắc dọc trong thời điểm tạm thời (bằng cách sinh sản giao diện mang đến luật lệ ngang, v.v.) sẽ tùy thuộc vào ngôi trường hòa hợp áp dụng của người tiêu dùng, cơ mà ít nhất đấy là một bí quyết sửa chữa thay thế.