133

html에 hr (수평 규칙)이 있다는 것을 알고 있지만 vr (수직 규칙)이 있다고 생각하지 않습니다. 내가 틀렸고 그렇지 않은 경우 왜 수직 규칙이 없습니까?

html

— 자이 소프트
소스

17

이것은 사소한 질문이지만 CSS3 사양이 나오면 transform : rotate (90deg)를 사용하여 수직, 수평 규칙을 만들 수 있습니다.

— Jules

3

flexbox를 행 (디스플레이 : flex; flex-direction : row;)으로 사용하면 hr요소가 자동으로 수직이됩니다. height속성 을 설정하면 됩니다 (예 : 높이 : 80 %;).

— 로드리고

156

아니요, 수직 규칙은 없습니다.

논리적 인 의미는 없습니다. HTML은 순차적으로 구문 분석됩니다. 즉, HTML 코드를 위에서 아래로, 왼쪽에서 오른쪽으로, 위에서 아래로, 왼쪽에서 오른쪽으로 (일반적으로) 표시하는 방법을 의미합니다.

vr 태그는 해당 패러다임을 따르지 않습니다.

그러나 CSS를 사용하면 쉽습니다. 전의:

<div style="border-left:1px solid #000;height:500px"></div>

높이를 지정하거나 컨테이너로 내용물을 채워야합니다.

— 앤디 베어드
소스

4

표는 항목을 세로로 분리 할 수 있으므로 vr 태그가없는 실제 이유가 아닙니다.

— CiscoIPPhone

6

그렇기 때문에 테이블이 HTML 사양에 추가되지 않았습니다. 테이블은 테이블 데이터를 표시하기위한 것입니다. 거의 모든 HTML 요소가 수직으로 별도의 항목을 사용할 수 있습니다 (무엇이든 당신은 디스플레이 설정 : 블록 및 플로트 : 어떤 높이 설정 왼쪽)

— 앤디 베어드을

19

erf. 물건을 이미 수직으로 분리 할 수 있다면 어떻게 vr을 추가하면 HTML 패러다임을 따르지 않을 것이라고 말하려고했습니다.

— CiscoIPPhone

4

@CiscoIPPhone-수직 분리에는 수평 규칙이 필요합니다. 측면 분리에는 수직 규칙이 필요합니다. Ergo, Andy Baird가 맞다고 생각합니다.

— Joshua

3

나는 그것이 패러다임을 따르지 않는다는 것에 동의 할 수 없다. 당신이 말했듯이 순차적으로, 위에서 아래로, 왼쪽에서 오른쪽으로 구문 분석됩니다. 세로 규칙으로 왼쪽에서 오른쪽으로가는 내용을 나눌 수 있습니다. HTML의 초기에는 논리적으로 이해가되지 않았다는 데 동의합니다. 의미 론적으로 올바른 태그가 없지만 수직 규칙은 HTML에서 자주 사용되지 않습니다. 내 두 센트.

— Hendeca

37

다음과 같은 수직 규칙을 만들 수 있습니다. <hr style="width: 1px; height: 20px; display: inline-block;">

— 매트
소스

16

다른 사람들이 지적한 바와 같이, 수직 규칙의 개념은 HTML 문서의 구조와 표현에 대한 독창적 인 아이디어와 맞지 않습니다. 그러나 요즘 (특히 웹 응용 프로그램의 확산으로 인해) 실제로 유용한 유용한 시나리오가 거의 없습니다.

예를 들어, 대부분의 창 GUI 응용 프로그램의 메뉴 표시 줄과 유사하게 화면 상단에 고정 된 가로 탐색 메뉴를 고려하십시오. 클릭하면 열리는 드롭 다운 메뉴를 왼쪽에서 오른쪽으로 정렬하는 여러 가지 최상위 메뉴 항목이 있습니다. 몇 년 전, 단일 행 테이블로 이것을 작성하는 것이 일반적인 관행 이었지만 이것은 나쁜 HTML이며 올바른 이동 방법은 엄청나게 커스터마이징 된 CSS가있는 목록 일 것입니다.

이제 비슷한 항목을 그룹화하고 그룹 사이에 세로 구분 기호를 추가하여 다음과 같이하십시오.

[Item 1a] [Item 1b] | [Item 2a] [Item 2b]

<hr style="width: 1px; height: 100%; ..." />작품을 사용 하지만 해당 요소의 실제 내용을 변경하면 의미 상 올바르지 않은 것으로 간주 될 수 있습니다. 또한 HTML DTD가 인라인 레벨 요소 만 허용하는 특정 요소 (예 : 요소 내)에서는이를 사용할 수 없습니다 .

더 나은 옵션은 이지만 모든 브라우저가 display: inline-block;CSS 속성을 지원하는 것은 아니므로 실제 인라인 수준 옵션은 이미지를 다음과 같이 사용하는 것입니다.

<img src="pixel.gif" alt="|" style="width:1px; height:100%; background:#000; margin: 0 2px;" />

이는 파이프 문자가 이미지 대신 표시되므로 lynx와 같은 텍스트 전용 브라우저와 호환되는 이점이 있습니다. (M $ IE가 대체 텍스트를 툴팁으로 잘못 사용한다는 것은 여전히 귀찮습니다. 제목 속성의 목적입니다!)

— Daiscog
소스

8

<style type="text/css">
.vr
{
  display:inline;
  height:100%;
  width:1px;
  border:1px inset;
  margin:5px
}
</style>

<div style="font-size:50px">Vertical Rule: &rarr;<div class="vr"></div>&larr;</div>

사용해보십시오.

— 베니 민 일머
소스

7

어때요?

writing-mode:tb-rl

위-> 아래, 오른쪽-> 왼쪽?

이를 위해서는 수직 규칙이 필요합니다.

— vscpp
소스

그건 좋은 지적이야. 그러나 이는 DOM의 다른 모든 요소와 경쟁해야하기 때문에 페이지를 기존과 다른 방식으로 렌더링하는 것을 의미합니다. 때때로 브라우저마다 렌더링 차이가 있다는 것을 알고 계셨습니까? ;) ~ 그럼에도 불구하고 아주 좋은 지적 .

— jcolebrand

7

display : flex 내부의 <hr>는 세로로 표시합니다.

JSFiddle : https://jsfiddle.net/w6y5t1kL/

예:

<div style="display:flex;">
  <div>
    Content
    <ul>
      <li>Continued content...</li>
    </ul>
  </div>
  <hr>
  <div>
    Content
    <ul>
      <li>Continued content...</li>
    </ul>
  </div>
</div>

— 닉시 노바
소스

3

없어요, 어디로 갈까요?

CSS를 사용하여 원하는 경우 요소에 테두리를 배치하십시오.

— 차드 버치
소스

2

HTML은 컨텐츠 레이아웃의 인쇄 특성으로 인해 세로 위치가 거의 없거나 전혀 없습니다. 수직 규칙은 그 의미에 맞지 않습니다.

— 미로슬라프
소스

2

그것을 시도하고 당신은 자신을 알게 될 것입니다 :

<body>
rokon<br />
rkn <hr style="width: 1px; height: 10px; display: inline; margin-left: 2px; margin-right: 2px;" />rockon<br />
rocks
</body>
</html>

— 무하마드 rokonuzzaman
소스

2

당신은 두 가지 방법으로 할 수 있습니다 :

div에서 이미 스타일을 만들었지 만 border-left를 border-right로 변경하십시오.
이미지를 촬영하여 너비를 1-2 픽셀로 만듭니다.

— BoltClock
소스

2

고대의 질문이지만이 문제를 해결 display:flex;했으며 훌륭하게 작동합니다.

<div style="display:flex;border:1px dotted black;margin-bottom:20px;">
    <div>
        This is a div
    </div>
    <div style="border-left:1px solid black;margin:0 7.5px;"></div>
    <div>
        This is another div
    </div>  
</div>

https://jsfiddle.net/6qfd59vm/3/

이 솔루션에는 고정 높이가 필요하지 않습니다.

— 테로 하이 스카 넨
소스

미래의 해결책, 그러나 아마도 2017-18 +까지 :)

— jave.web

2

이 시도.

" hr "의 범위와 같이 " div " 에서 높이와 너비를 설정할 수 있습니다 " .

" hr " 의 여백은 정렬에 사용됩니다.

<div style="display: inline-flex; width: 25px; height: 100px;">
  <hr style="margin: 0px 0px 0px 12.5px;">
</div>

스 니펫 확장

— 정 청우
소스

2

내 답변을 매우 늦게 추가한다는 것을 알고 있지만 확실하게 가치가 있습니다. 당신이 사용하는 수직선을 달성 할 수 flex및hr

내 코드 펜을 참조 하십시오 .

— 우 메쉬
소스

2

안하는 것보다 늦게하는 것이 낫다!

— Jry9972

1

탐색으로 사용되는 목록 항목의 맥락에서 <vr /> 태그는 매우 유용합니다. 존재하지 않는 이유는 10 년 전 HTML과 관련하여 "논리적으로 이해가되지 않기"때문입니다.

— joemaddalone
소스

1

대부분의 데스크톱 클라이언트에서 HTML 전자 메일에 사용하려면 테이블을 사용해야합니다. 이 경우 다음 <hr>과 같이 필요한 (단순한) 인라인 스타일링으로 태그 를 사용할 수 있습니다 .

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

물론 CSS를 사용한 스타일은 더 유연하지만 Gmail 및 이와 유사한 기능은 인라인 이외의 CSS 스타일을 사용할 수 없습니다 ...

— 데스크 보
소스

1

수직선을 시뮬레이션하기 위해 CSS를 사용하고 div에서 클래스를 사용할 수 있습니다

.vhLine {
  border-left: thick solid #000000;
}

— 야이나 빌라 파네
소스

1

당신은이 작업을 매우 쉽게 수행 할 수 있습니다

hr{
 transform: rotate(90deg);
}

<html>
<head>
</head>
<body>
<hr>
</body> 
</html>

스 니펫 확장

hr의 높이와 너비에주의하십시오

— 질식
소스

1

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;*/
}

* 위의 참고 사항을 참조하십시오. SO의 원래 답변에

연결하십시오 .

— 쿼티
소스

0

다음과 같이 사용자 정의 태그를 만들 수 있습니다.

<html>
<head>
<style>
vr {
display: inline-block;
// This is where you'd set the ruler color
background-color: black;
// This is where you'd set the ruler width
width: 2px;
//this is where you'd set the spacing between the ruler and surrounding text
margin: 0px 5px 0px 5px;
height: 100%;
vertical-align: top;
}
</style>
</head>
<body>
this is text <vr></vr> more text
</body>
</html>

(누구든지이 정보를 "오픈 엔드"태그로 바꿀 수있는 방법을 알고 있다면 <hr>알려 주시면 수정하겠습니다.)

— 거부
소스

짧은 태그를 지정할 수 있습니다<vr />

— jave.web

0

HTML에는 태그가 없지만 |를 사용할 수 있습니다.

— 사용자 3576467
소스

0

새로운 HTML5 SVG 태그를 사용할 수 있습니다.

<svg style="position:absolute;width:100%;height:100%;">
    <line id="myVerticalLine" y1="0" y2="100" x1="0" x2="0">
    </line>
</svg>

— 1.21 기가 와트
소스

0

선의 이미지를 쉽게 만든 다음 필요에 따라 너비 및 / 또는 높이를 설정하여 코드에 "규칙"으로 삽입합니다. 이들은 모두 수평 규칙 이미지이지만 "수직 규칙"이미지 사용을 막을 수있는 것은 없습니다.

이것은 여러 가지 이유로 시원합니다. 서로 다른 선, 색상 또는 패턴을 "규칙"으로 쉽게 사용할 수 있으며, 텍스트가 없기 때문에 HTML에서 hr을 사용하여 "정상"방식으로 수행 했더라도 SEO 또는 기타 항목에 영향을 미치지 않아야합니다. 그. 그리고 이미지 파일은 매우 작거나 같아야합니다 (최대 1 또는 2KB).

— 피터 제이
소스

제안하는 기술을 보여주기 위해 샘플 코드를 포함해야합니다.

— Adam Katz

0

지나치게 복잡한 답변이 너무 많습니다. rowspan을 사용하여 원하는 행 수에 걸쳐있는 TableData 태그를 작성하십시오. 그런 다음 실제 막대에 오른쪽 테두리를 사용하십시오.

예:

<td rowspan="5" style="border-right-color: #000000; border-right-width: thin; border-right-style: solid">&nbsp;</td>
<td rowspan="5">&nbsp;</td>

두 번째 줄의 "& nbsp"가 첫 번째 줄과 동일한 양의 줄을 실행하는지 확인하십시오. 둘 사이에 적절한 간격이 있도록

이 기술은 HTML5에서 제 시간을 잘 보냈습니다.

— 케빈 앤드류 포그
소스

0

오늘은 가능합니다 CSS3

hr {
  background-color:black;
  color:black;
  -webkit-transform:rotate(90deg);
  position:absolute;
  width:100px;
  height:2px;
  left:100px;
}

— 촛대
소스

0

텍스트를위한 열을 만들려고하는 사람들을 위해 사용하는 열 규칙 속성이 있습니다!

.content{
  margin: 20px 5%;
  padding: 5px;
  
}
.content p{
  -webkit-column-count: 3;
  -moz-column-count:3;
  -o-column-count:3;
  column-count: 3; 
  -webkit-column-rule: 1px solid #ccc;
  -moz-column-rule: 1px solid #ccc;
  -o-column-rule: 1px solid #ccc;
  column-rule: 1px solid #ccc;
 
  text-align: justify;
}

<div class="content">
  <p>
    Lorizzle ipsum tellivizzle sit amizzle, consectetizzle adipiscing elit. Nullam away things, shizznit stuff, suscipizzle shiz, gravida vizzle, funky fresh. Doggy phat tortizzle. Check it out its fo rizzle. Bizzle izzle shizzle my nizzle crocodizzle dapibus turpizzle tempizzle i'm in the shizzle. Mauris gizzle nibh et ghetto. Vestibulum ass phat. Pellentesque eleifend nizzle nisi. Fo shizzle my shizz shiznit fo shizzle dizzle. Donec dapibus. That's the shizzle uhuh ... yih! urna, pretium eu, mattizzle cool, shit things, nunc. Fizzle suscipizzle. Shizzlin dizzle semper daahng dawg boofron bow wow wow.



  </p>
  
  
</div>

스 니펫 확장

— 아베 312
소스

0

<div style="width:1px;background-color:red;height:30px;float:right;"></div>

이와 같은 div를 사용하여 쉽게 수행 할 수 있습니다

— x 미
소스

-1

없기.

왜? 아마도 두 개의 열이있는 테이블이 할 것이기 때문입니다.

— OscarRyz
소스

23

사람들은 이것을 위해 테이블을 사용해야한다고 생각하지 않기 때문에 (나는 공감하지 않았다).

— erikkallen

-2

아니 없어. 그리고 왜 그렇지 않은지에 대한 작은 이야기를하겠습니다. 그러나 먼저 빠른 솔루션 :

기본 요소에 대한) 사용 CSS 클래스 span/ div예 : :

.vr{ 
   display: inline-block; 
   vertical-align: middle; 
   /* note that height must be precise, 100% does not work in some major browsers */
   height: 100px; 
   width: 1px; 
   background-color: #000;
}

사용 데모 => https://jsfiddle.net/fe3tasa0/

b):first-child 형제 / 네이버 요소 사이에 일반 구분선을 적용하려면 한쪽 테두리 만 사용 하고 CSS 선택기를 사용하십시오.

원래 패러다임에서의 `<vr>` 피팅 에 관한 이야기 ,
이지만 여전히 거기에 없습니다.

여기에 많은 대답은 수직 분배기가 원래의 HTML 패러다임 / 접근법에 맞지 않는다는 것을 제안합니다 ... 그것은 완전히 잘못되었습니다. 또한 그 대답은 스스로 모순된다.

같은 사람들이 아마도 그들의 명확한 CSS 클래스를 "clearfix"라고 부릅니다. 플로팅에 대해서는 고칠 것이 없습니다. 그냥 지우는 것 <clear>입니다. HTML3에는 요소도있었습니다 . 슬프게도, 이것과 떠 다니는 클리어런스는 몇 가지 일반적인 오해 중 하나입니다.

어쨌든. "돌아 가기 다음"는 "원래 HTML 세"에서처럼 뭔가에 대해 어떤 생각이 없었다 inline-block가 단지 있었다 blocks, inlines하고 tables.

마지막은 실제로 <vr>존재하지 않는 이유 입니다.
당시에는 다음과 같이 가정했습니다.
수직으로 무언가를 나누거나 왼쪽에서 오른쪽으로 더 많은 블록
을 만들려면 =>
=> 열을 만들거나 만들고 싶습니다 => => 테이블을 만들고 있음을 의미합니다 =>
= > 표에는 셀 사이에 자연 경계가 있습니다 .<vr>

이 방법은 실제로 여전히 유효하지만 시간이 보여 주듯이 표에 대한 구문은 모든 경우와 기본 스타일에 적합하지 않습니다.

나중에 또 다른 가정은 테이블을 작성하지 않는 경우 아마도 블록 요소를 떠있는 것으로 가정했습니다 . 그들이 고집하는 의미 그 함께 , 다시, 당신은 테두리를 설정할 수 있습니다 , 그 날이 아마 사용 :first-child나는 위의 제안 선택을 ...

— jave.web
소스

html에 vr (수직 규칙)이 있습니까?

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

1. 자바 스크립트

2. CSS

3. 인스턴스화

용법

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

CSS

원래 패러다임에서의 <vr> 피팅 에 관한 이야기 , 이지만 여전히 거기에 없습니다.

원래 패러다임에서의 `<vr>` 피팅 에 관한 이야기 ,
이지만 여전히 거기에 없습니다.