HTML을 사용하여 수직선을 어떻게 만드나요?

를 넣어 <div>스타일 그것에 당신이 선 다음에 표시 할 마크 업 및 CSS를 사용 주위 :

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

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

가로 규칙 태그를 사용하여 세로선을 만들 수 있습니다.

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

최소 너비와 큰 크기를 사용하면 가로 규칙이 세로 규칙이됩니다.

당신은 빈을 사용할 수 있습니다 <div>선이 나타나도록 원하는 스타일로 을 .

HTML :

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

정확한 높이 (인라인 스타일보다 우선) :

  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>

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>

물론 고급 조합을 실험 해 볼 수도 있습니다.

  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>

HTML 수평선을 사용하여 수직선을 만들 수도 있습니다 <hr />

html, body{height: 100%;}

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

<hr class="vertical" />

<hr>요소 와 동등한 수직선이 없습니다 . 그러나 시도 할 수있는 한 가지 접근법은 분리하는 모든 것의 왼쪽 또는 오른쪽에 간단한 테두리를 사용하는 것입니다.

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

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

HTML5 맞춤 요소 (또는 순수 CSS)

1. 자바 스크립트

요소를 등록하십시오.

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

* -모든 사용자 정의 요소에서 필수입니다.

2. CSS

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

* 당신과 함께 약간의 바이올린해야 할 수도 display:inline-block|inline있기 때문에 inline요소의 높이를 포함로 확장되지 않습니다. 컨테이너 내에서 선을 중앙에 맞추려면 여백을 사용하십시오.

3. 인스턴스화

js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>

* 불행히도 사용자 정의 자동 닫기 태그를 만들 수 없습니다.

용법

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

예: http://html5.qry.me/vertical-rule

자바 스크립트를 엉망으로 만들고 싶지 않습니까?

이 CSS 클래스를 지정된 요소에 적용하기 만하면됩니다.

CSS

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

* 위의 참고 사항을 참조하십시오.

다른 옵션은 1 픽셀 이미지를 사용하고 높이를 설정하는 것입니다.이 옵션을 사용하면 원하는 위치에 이미지를 띄울 수 있습니다.

그러나 가장 우아한 해결책은 아닙니다.

HTML 요소에 높이 / 너비를 사용하여 세로선을 그릴 수 있습니다.

#verticle-line {
  width: 1px;
  min-height: 400px;
  background: red;
}

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

HTML에서 세로선을 만드는 태그가 없습니다.

1. 방법 : 선 이미지를로드합니다. 그런 다음 스타일을 다음과 같이 설정하십시오."height: 100px ; width: 2px"

2. 방법 : <td>태그 를 사용할 수 있습니다<td style="border-left: 1px solid red; padding: 5px;"> X </td>

hr (가로선) 태그를 사용하고 아래 CSS로 90도 회전 할 수 있습니다

hr {   
    transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}

http://jsfiddle.net/haykaghabekyan/0c969bm6/1/

제안 된 "hr"코드의 조합을 사용했으며 다음은 내 코드 모양입니다.

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

"왼쪽"픽셀 값을 단순히 위치로 변경했습니다. 세로줄을 사용하여 웹 페이지의 내용을 정렬 한 다음 제거했습니다.

div 내부에 수직선을 만들려면이 코드를 사용할 수 있다고 생각합니다. '컨테이너'는 100 % 너비 일 수 있습니다.

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>

HTML 특수 문자 인 & # 124를 사용하지 않는 이유 |

하위 요소 (열 요소)를 구분하기 위해 컨테이너에 세로선을 배치하는 것이 목표라면 다음과 같이 컨테이너 스타일을 고려할 수 있습니다.

.container > *:not(:first-child) {
  border-left: solid gray 2px;
}

이렇게하면 두 번째 자식부터 시작하여 모든 자식 요소에 왼쪽 테두리가 추가됩니다. 다시 말해 인접한 어린이들 사이에 세로 테두리가 나타납니다.

• >자식 선택기입니다. 왼쪽에 지정된 요소의 모든 하위 항목과 일치합니다.
• *범용 선택기입니다. 모든 유형의 요소와 일치합니다.
• :not(:first-child) 부모의 첫 아이가 아님을 의미합니다.

브라우저 지원 : > * : first-child 및 : not ()

나는 이것이 단순한 것보다 낫다고 생각한다 .child-except-first {border-left: ...}다른 자식 요소의 규칙이 아니라 컨테이너 규칙에서 세로선을 가져 오는 것이 더 합리적이기 때문에 이것이 규칙 .

임시 규칙을 사용하여 임시 규칙 규칙을 사용하는 것보다이 규칙이 더 나은지 여부는 사용 사례에 따라 다르지만 적어도 대안입니다.

또 다른 방법이 가능합니다 : SVG 사용 .

예 :

<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>

찬성 :

• 모든 길이와 방향의 선을 가질 수 있습니다.
• 너비, 색상을 쉽게 지정할 수 있습니다

단점 :

• SVG는 이제 대부분의 최신 브라우저에서 지원됩니다. 그러나 IE 8 및 이전 버전과 같은 일부 오래된 브라우저는이를 지원하지 않습니다.

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>
  

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>
  

수직선을 추가하려면 시간 스타일을 지정해야합니다.

이제 세로줄을 만들면 페이지 중간에 나타납니다.

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

이제 원하는 곳에 넣으면 다음 코드를 사용할 수 있습니다.

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

그러면 왼쪽에 배치되고 반대 방향으로 배치하면 오른쪽에 배치됩니다.

<hr>수평선에 태그 가 있습니다 . 가로선을 만들기 위해 CSS와 함께 사용할 수도 있습니다.

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

<hr class="divider">

너비 속성은 선의 두께를 결정합니다. height 속성은 선의 길이를 결정합니다. background-color 속성은 선의 색을 결정합니다.

이전 행에서 세로 행을 적용하려는 경우 CSS를 설정할 수 있습니다 ...

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

로테이트 <hr>90도 :

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

인라인 스타일의 경우이 코드를 사용했습니다.

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

중앙에 직접 배치했습니다.

인라인 세로선이 필요했기 때문에 버튼을 속여서 선이되었습니다.

<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>

이것은 나를 위해 잘 작동

중간에 세로선을 가운데에 맞추려면 :

position: absolute; 
left: 50%;