html에 vr (수직 규칙)이 있습니까?
html에 hr (수평 규칙)이 있다는 것을 알고 있지만 vr (수직 규칙)이 있다고 생각하지 않습니다. 내가 틀렸고 그렇지 않은 경우 왜 수직 규칙이 없습니까?
아니요, 수직 규칙은 없습니다.
논리적 인 의미는 없습니다. HTML은 순차적으로 구문 분석됩니다. 즉, HTML 코드를 위에서 아래로, 왼쪽에서 오른쪽으로, 위에서 아래로, 왼쪽에서 오른쪽으로 (일반적으로) 표시하는 방법을 의미합니다.
vr 태그는 해당 패러다임을 따르지 않습니다.
그러나 CSS를 사용하면 쉽습니다. 전의:
<div style="border-left:1px solid #000;height:500px"></div>
높이를 지정하거나 컨테이너로 내용물을 채워야합니다.
다음과 같은 수직 규칙을 만들 수 있습니다. <hr style="width: 1px; height: 20px; display: inline-block;">
다른 사람들이 지적한 바와 같이, 수직 규칙의 개념은 HTML 문서의 구조와 표현에 대한 독창적 인 아이디어와 맞지 않습니다. 그러나 요즘 (특히 웹 응용 프로그램의 확산으로 인해) 실제로 유용한 유용한 시나리오가 거의 없습니다.
예를 들어, 대부분의 창 GUI 응용 프로그램의 메뉴 표시 줄과 유사하게 화면 상단에 고정 된 가로 탐색 메뉴를 고려하십시오. 왼쪽에서 오른쪽으로 배열 된 몇 가지 최상위 메뉴 항목이 있으며, 클릭하면 열리는 드롭 다운 메뉴가 열립니다. 몇 년 전, 단일 행 테이블로 이것을 작성하는 것이 일반적인 관행 이었지만 이것은 나쁜 HTML이며 올바른 이동 방법은 엄청나게 커스터마이징 된 CSS가있는 목록 일 것입니다.
이제 비슷한 항목을 그룹화하고 그룹 사이에 세로 구분 기호를 추가하여 다음과 같이하십시오.
[Item 1a] [Item 1b] | [Item 2a] [Item 2b]
<hr style="width: 1px; height: 100%; ..." />작품을 사용 하지만 해당 요소의 실제 내용을 변경하면 의미 상 올바르지 않은 것으로 간주 될 수 있습니다. 또한 HTML DTD가 인라인 레벨 요소 만 허용하는 특정 요소 (예 : 요소 내)에서는이를 사용할 수 없습니다 <span>.
더 나은 옵션은 <span style="display: inline-block; width:1px; height:100%; background:#000; margin: 0 2px;"></span>이지만 모든 브라우저가 display: inline-block;CSS 속성을 지원하는 것은 아니므로 실제 인라인 수준 옵션은 이미지를 다음과 같이 사용하는 것입니다.
<img src="pixel.gif" alt="|" style="width:1px; height:100%; background:#000; margin: 0 2px;" />
이는 파이프 문자가 이미지 대신 표시되므로 lynx와 같은 텍스트 전용 브라우저와 호환되는 이점이 있습니다. (M $ IE가 대체 텍스트를 툴팁으로 잘못 사용한다는 것은 여전히 귀찮습니다. 제목 속성의 목적입니다!)
<style type="text/css">
.vr
{
display:inline;
height:100%;
width:1px;
border:1px inset;
margin:5px
}
</style>
<div style="font-size:50px">Vertical Rule: →<div class="vr"></div>←</div>
사용해보십시오.
어때요?
writing-mode:tb-rl
위-> 아래, 오른쪽-> 왼쪽?
이를 위해서는 수직 규칙이 필요합니다.
없어요, 어디로 갈까요?
CSS를 사용하여 원하는 경우 요소에 테두리를 배치하십시오.
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>
HTML은 컨텐츠 레이아웃의 인쇄 특성으로 인해 세로 위치가 거의 없거나 전혀 없습니다. 수직 규칙은 그 의미에 맞지 않습니다.
그것을 시도하고 당신은 자신을 알게 될 것입니다 :
<body>
rokon<br />
rkn <hr style="width: 1px; height: 10px; display: inline; margin-left: 2px; margin-right: 2px;" />rockon<br />
rocks
</body>
</html>
당신은 두 가지 방법으로 할 수 있습니다 :
- div에서 이미 스타일을 만들었지 만 border-left를 border-right로 변경하십시오.
- 이미지를 촬영하여 너비를 1-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/
이 솔루션에는 고정 높이가 필요하지 않습니다.
이 시도.
" hr " 의 범위와 같이 " div " 에서 높이와 너비를 설정할 수 있습니다 .
" hr " 의 여백은 정렬에 사용됩니다.
<div style="display: inline-flex; width: 25px; height: 100px;">
<hr style="margin: 0px 0px 0px 12.5px;">
</div>내 답변을 매우 늦게 추가한다는 것을 알고 있지만 확실하게 가치가 있습니다. 당신이 사용하는 수직선을 달성 할 수 flex및hr
탐색으로 사용되는 목록 항목의 맥락에서 <vr /> 태그는 매우 유용합니다. 존재하지 않는 이유는 10 년 전 HTML과 관련하여 "논리적으로 이해가되지 않기"때문입니다.
대부분의 데스크톱 클라이언트에서 HTML 전자 메일에 사용하려면 테이블을 사용해야합니다. 이 경우 다음 <hr>과 같이 필요한 (단순한) 인라인 스타일링으로 태그 를 사용할 수 있습니다 .
<hr width="1" size="50">
물론 CSS를 사용한 스타일은 더 유연하지만 Gmail 및 이와 유사한 기능은 인라인 이외의 CSS 스타일을 사용할 수 없습니다 ...
수직선을 시뮬레이션하기 위해 CSS를 사용하고 div에서 클래스를 사용할 수 있습니다
.vhLine {
border-left: thick solid #000000;
}
당신은 매우 쉽게 이것을 할 수 있습니다
hr{
transform: rotate(90deg);
}<html>
<head>
</head>
<body>
<hr>
</body>
</html>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
자바 스크립트를 엉망으로 만들고 싶지 않습니까?
Simply apply this CSS class to your designated element.
css
.vr {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}
*See notes above.
link to original answer on SO.
You could create a custom tag as such:
<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>
(If anyone knows a way that I could turn this into an "open-ended" tag, like <hr> let me know and I will edit it in)
There is not.
Why? Probably because a table with two columns will do.
There is no tag in HTML, but you can use |.
You could use the new HTML5 SVG tag:
<svg style="position:absolute;width:100%;height:100%;">
<line id="myVerticalLine" y1="0" y2="100" x1="0" x2="0">
</line>
</svg>
I find it easy to make an image of a line, and then insert it into the code as a "rule", setting the width and/or height as needed. These have all been horizontal-rule images, but there's nothing stopping me (or you) from using a "vertical-rule" image.
This is cool for many reasons; you can use different lines, colors, or patterns easily as "rules", and since they would have no text, even if you had done it the "normal" way using hr in HTML, it shouldn't impact SEO or other stuff like that. And the image file would/should be very tiny (1 or 2KB at most).
Too many overly-complicated answers. Just make a TableData tag that spans how many rows you want it to using rowspan. Then use the right-border for the actual bar.
Example:
<td rowspan="5" style="border-right-color: #000000; border-right-width: thin; border-right-style: solid"> </td>
<td rowspan="5"> </td>
Ensure that the " " in the second line runs the same amount of lines as the first. so that there's proper spacing between both.
This technique has served me rather well with my time in HTML5.
Today is possible with CSS3
hr {
background-color:black;
color:black;
-webkit-transform:rotate(90deg);
position:absolute;
width:100px;
height:2px;
left:100px;
}
For people who're trying to make columns for text, there's a column-rule property which you should consider using!
.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><div style="width:1px;background-color:red;height:30px;float:right;"></div>
Easily can be done using a div like this
No there is not. And I will tell you a little story on why it is not. But first, quick solutions:
a) Use CSS class for basic elements span/div, e.g.: <span class="vr"></span>:
.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;
}
Demonstration of use => https://jsfiddle.net/fe3tasa0/
b) Make a use of a one-side-only border and possibly CSS :first-child selector if you want to apply a general dividers among sibling/neigbour elements.
The story about <vr> FITTING in the original paradigm,
but still not being there:
Many answers here suggest, that vertical divider does not fit the original HTML paradigm/approach ... that is completely wrong. Also the answers contradict themselves a lot.
Those same people are probably calling their clear CSS class "clearfix" - there is nothing to fix about floating, you are just clearing it ... There was even an element in HTML3: <clear>. Sadly, this and clearance of floating is one of the few common misconceptions.
Anyway. "Back then" in the "original HTML ages", there was no thought about something like inline-block, there were just blocks, inlines and tables.
The last one is actually the reason why <vr> does not exist.
Back then it was assumed that:
If you want to verticaly divide something and/or make more blocks from left to right =>
=> you are making/want to make columns =>
=> that implies you are creating a table =>
=> tables have natural borders between their cells => no reason to make a <vr>
This approach is actually still valid, but as time showed, the syntax made for tables is not suitable for every case as well as it's default styles.
나중에 또 다른 가정은 테이블을 작성하지 않는 경우 아마도 블록 요소를 떠있는 것으로 가정했습니다 . 그들이 고집하는 의미 그 함께 , 다시, 당신은 테두리를 설정할 수 있습니다 , 그 날이 아마 사용
:first-child나는 위의 제안 선택을 ...
참고 URL : https://stackoverflow.com/questions/571900/is-there-a-vr-vertical-rule-in-html
'programing tip' 카테고리의 다른 글
| JPA 엔티티가 언제 그리고 왜 직렬화 가능 인터페이스를 구현해야합니까? (0) | 2020.07.07 |
|---|---|
| C의 객체 파일은 무엇입니까? (0) | 2020.07.07 |
| node.js에서 기본 시간대를 어떻게 설정합니까? (0) | 2020.07.07 |
| 비교 연산자는 null int와 어떻게 작동합니까? (0) | 2020.07.07 |
| Xcode에서 "링크 된 프레임 워크"대신 "내장 바이너리"를 언제 사용해야합니까? (0) | 2020.07.07 |