HTML에서 세로줄을 만드는 방법 HTML을 사용하여 수직선을 어떻게 만드나요?

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 픽셀 이미지를 사용하고 높이를 설정하는 것입니다.이 옵션을 사용하면 원하는 위치에 이미지를 띄울 수 있습니다.

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