Làm thế nào để bạn tạo một đường thẳng đứng bằng HTML?

Đặt một <div>đánh dấu xung quanh nơi bạn muốn dòng xuất hiện tiếp theo và sử dụng CSS để tạo kiểu cho nó:

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

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

Bạn có thể sử dụng thẻ quy tắc ngang để tạo các đường thẳng đứng.

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

Bằng cách sử dụng chiều rộng tối thiểu và kích thước lớn, quy tắc ngang trở thành quy tắc dọc.

Bạn có thể sử dụng một sản phẩm nào <div>được tạo kiểu chính xác như bạn muốn dòng xuất hiện:

HTML:

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

Với chiều cao chính xác (ghi đè kiểu trong dòng):

  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>

Tạo kiểu viền nếu bạn muốn nhìn 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>

Tất nhiên bạn cũng có thể thử nghiệm với các kết hợp nâng cao:

  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>

Bạn cũng có thể tạo một đường thẳng đứng bằng cách sử dụng đường ngang HTML <hr />

html, body{height: 100%;}

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

<hr class="vertical" />

Không có chiều dọc tương đương với <hr>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 một đườ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 ra:

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

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

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

1. javascript

Đăng ký yếu tố của bạn.

var vr = document.registerElement('v-r'); // vertical rule please, yes!

* Điều -này 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 display:inline-block|inlinevì inlinesẽ 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());
or
HTML: <v-r></v-r>

* Thật không may, bạn không thể tạo các thẻ tự đóng tùy chỉnh.

sử dụng

 <h1>THIS<v-r></v-r>WORKS</h1>

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.

css

.vr {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

* Xem ghi chú ở trên.

Mộ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ù.

Bạ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;
}

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

Không có bất kỳ thẻ nào để tạo một đường thẳng đứng trong HTML.

1. Phương pháp: Bạn tải một hình ảnh dòng. Sau đó, bạn thiết lập phong cách của nó như"height: 100px ; width: 2px"

2. Phương pháp: Bạn có thể sử dụng <td>thẻ<td style="border-left: 1px solid red; padding: 5px;"> X </td>

Bạ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/

Tô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:

<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>

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 đó.)

Để 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.

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>

Tại sao không sử dụng & # 124, ký tự đặc biệt html cho |

Nế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ẹ nó.

Hỗ trợ trình duyệt: > *: con đầu lòng và : không ()

Tôi nghĩ rằng điều này tốt hơn một .child-except-first {border-left: ...}quy tắc đơn giản , bởi vì sẽ có ý nghĩa hơn khi các đường thẳng đứng đến từ quy tắc của bộ chứa chứ không phải quy tắc của các thành phần con khác nhau.

Việc này có tốt hơn so với 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ế.

Một cách tiếp cận nữa là có thể: Sử dụng SVG .

ví dụ :

<svg height="210" width="500">
    <line x1="0" y1="0" x2="0" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
      Sorry, your browser does not support inline SVG.
</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ó.

Đường thẳng đứng tới 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>
  

Đường dọc bên trái đến 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>
  

Để thêm một đường thẳng đứng, bạn cần tạo kiểu một giờ.

Bây giờ khi bạn tạo một đường thẳng đứng, nó sẽ xuất hiện ở giữa trang:

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

Bây giờ để đặt nó ở nơi bạn muốn, bạn có thể sử dụng mã này:

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

Điều này sẽ định vị nó ở bên trái, bạn có thể đảo ngược nó để đặt nó sang bên phải.

Trong phần tử Trước mà sau đó bạn muốn áp dụng hàng dọc, Bạn có thể đặt CSS ...

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

Xoay <hr>90 độ:

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

Có một <hr>thẻ cho đường ngang. Nó có thể được sử dụng với CSS để tạo đường ngang:

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

<hr class="divider">

Thuộc tính chiều rộng xác định độ dày của đường. Thuộc tính chiều cao xác định chiều dài của dòng. Thuộc tính màu nền xác định màu của đường.

Đối với một kiểu nội tuyến, tôi đã sử dụng mã này:

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

và điều đó định vị nó trực tiếp ở trung tâm.

Tôi cần một đường thẳng đứng, vì vậy tôi đã lừa một nút để trở thành một đường thẳng.

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

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

<div style="width:1px;background-color:#C0C0C0;"></div>

Nó hiệu quả tuyệt vời đối với tôi

Để làm cho đường thẳng đứng đến trung tâm ở giữa sử dụng:

position: absolute; 
left: 50%;