133

ฉันรู้ว่ามี hr (กฎแนวนอน) ใน html แต่ฉันไม่เชื่อว่ามี vr (กฎแนวตั้ง) ฉันผิดหรือไม่ถ้าไม่ทำไมไม่มีกฎแนวตั้ง

html

17

นี่เป็นคำถามที่ตายแล้ว แต่ด้วยข้อกำหนด CSS3 ตอนนี้คุณสามารถใช้ transform: หมุน (90deg) เพื่อสร้างกฎแนวตั้งแนวนอน

— Jules

3

หากคุณใช้ flexbox เป็นแถว (display: flex; flex-direction: row;) hrองค์ประกอบจะกลายเป็นแนวตั้งโดยอัตโนมัติ คุณต้องตั้งค่าheightคุณสมบัติ (เช่นความสูง: 80%;)

— Rodrigo

156

ไม่ไม่มีกฎแนวตั้ง

มันไม่สมเหตุสมผลที่จะมีอย่างใดอย่างหนึ่ง HTML ถูกแยกวิเคราะห์ตามลำดับซึ่งหมายความว่าคุณจัดวางโค้ด HTML ของคุณจากบนลงล่างซ้ายไปขวาตามที่คุณต้องการให้ปรากฏจากบนลงล่างซ้ายไปขวา (โดยทั่วไป)

แท็ก vr ไม่เป็นไปตามกระบวนทัศน์นั้น

วิธีนี้ทำได้ง่ายโดยใช้ CSS Ex:

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

โปรดทราบว่าคุณต้องระบุความสูงหรือเติมเนื้อหาลงในคอนเทนเนอร์

— Andy Baird
แหล่งที่มา

4

ตารางสามารถแยกรายการในแนวตั้งได้ดังนั้นสิ่งที่คุณกำลังพูดไม่ใช่เหตุผลที่แท้จริงที่ไม่มีแท็ก vr

— CiscoIPPhone

6

นั่นไม่ใช่สาเหตุที่เพิ่มตารางลงในข้อมูลจำเพาะ HTML ตารางมีไว้สำหรับแสดงข้อมูลแบบตาราง สามารถใช้องค์ประกอบ HTML เกือบทั้งหมดเพื่อแยกรายการในแนวตั้ง (สิ่งที่คุณตั้งค่าให้แสดง: บล็อกและลอย: เหลือชุดความสูงใด ๆ )

— Andy Baird

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>

ลองใช้งาน

— เวนามินอิลเมอร์
แหล่งที่มา

8

<hr> ภายในจอแสดงผล: flex จะทำให้แสดงในแนวตั้ง

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>

— Nixinova
แหล่งที่มา

7

เกี่ยวกับ:

writing-mode:tb-rl

ที่ไหนบน -> ล่างขวา -> ซ้าย?

เราต้องการกฎแนวตั้งสำหรับสิ่งนี้

— vscpp
แหล่งที่มา

นั่นเป็นจุดที่ดี อย่างไรก็ตามมันหมายถึงการแสดงผลหน้าเว็บในลักษณะที่ไม่เป็นทางการเนื่องจากคุณต้องแข่งขันกับองค์ประกอบอื่น ๆ ทั้งหมดในโดม คุณเคยสังเกตไหมว่าบางครั้งเบราว์เซอร์มีการแสดงผลที่แตกต่างกัน ;) ~ อย่างไรก็ตามจุดที่ดีมาก

— jcolebrand

3

มันจะไปไหน?

ใช้ CSS เพื่อใส่เส้นขอบให้กับองค์ประกอบหากคุณต้องการอะไรแบบนั้น

— ชาดเบิร์ช
แหล่งที่มา

2

HTML มีการวางตำแหน่งแนวตั้งเพียงเล็กน้อยหรือไม่มีเลยเนื่องจากลักษณะการพิมพ์ของเค้าโครงเนื้อหา Vertical Rule ไม่เหมาะกับความหมาย

— Myroslav
แหล่งที่มา

2

ลองดูแล้วคุณจะรู้เอง:

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

— มูฮัมหมัดโรโคนุซซามาน
แหล่งที่มา

2

ทำได้ 2 วิธีคือ

สร้างสไตล์ตามที่คุณให้ไว้แล้วใน div แต่เปลี่ยนเส้นขอบซ้ายเป็นเส้นขอบขวา
ถ่ายภาพและมีความกว้าง 1-2 พิกเซล

— กลอนนาฬิกา
แหล่งที่มา

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/

โซลูชันนี้ยังไม่ต้องการความสูงคงที่

— Tero Heiskanen
แหล่งที่มา

ทางออกของอนาคต แต่อาจจะไม่ถึง 2017-18 + :)

— jave.web

2

ลองทำตามนี้

คุณสามารถกำหนดความสูงและความกว้างบน " div " เช่นขอบเขตสำหรับ " hr "

ระยะขอบของ " hr " ใช้ในการจัดตำแหน่ง

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

ขยายข้อมูลโค้ด

— ชุง - หมิงหวู่
แหล่งที่มา

2

ฉันรู้ว่าฉันเพิ่มคำตอบช้าไป แต่มันก็คุ้มค่าที่ฉันมั่นใจ คุณสามารถบรรลุเส้นแนวตั้งโดยใช้flexและhr

ดูของฉันcodepen ที่นี่

— Umesh
แหล่งที่มา

2

มาสายดีกว่าไม่มาเลย!

— Jry9972

1

ในบริบทของรายการที่ใช้เป็นการนำทางแท็ก <vr /> จะมีประโยชน์อย่างสมบูรณ์ เหตุผลที่ไม่มีก็เพราะว่า "มันไม่สมเหตุสมผลที่จะมีอย่างใดอย่างหนึ่ง" ในบริบทของ HTML เมื่อทศวรรษที่แล้ว

— joemaddalone
แหล่งที่มา

1

สำหรับการใช้งานในอีเมล HTML สำหรับไคลเอนต์เดสก์ท็อปส่วนใหญ่คุณต้องใช้ตาราง ในกรณีนี้คุณสามารถใช้<hr>แท็กโดยใช้สไตล์อินไลน์ที่จำเป็น (แต่เรียบง่าย) เช่น:

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

แน่นอนว่าการจัดแต่งทรงผมด้วย CSS นั้นยืดหยุ่นกว่า แต่ GMail และสิ่งที่คล้ายกันไม่อนุญาตให้ใช้สไตล์ CSS ใด ๆ นอกเหนือจากอินไลน์ ...

— desko
แหล่งที่มา

1

คุณสามารถใช้ css เพื่อจำลองเส้นแนวตั้งและใช้คลาสบน div

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

— Yaina Villafañes
แหล่งที่มา

1

คุณสามารถทำได้อย่างง่ายดายโดย

hr{
 transform: rotate(90deg);
}

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

ขยายข้อมูลโค้ด

ระวังความสูงและความกว้างของชม

— Nitish
แหล่งที่มา

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

* ดูหมายเหตุด้านบน

เชื่อมโยงไปยังคำตอบเดิมในดังนั้น

— Qwerty
แหล่งที่มา

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>แจ้งให้เราทราบแล้วฉันจะแก้ไขใน)

— SReject
แหล่งที่มา

คุณสามารถแท็กสั้น ๆ ไปที่<vr />

— jave.web

0

ไม่มีแท็กใน HTML แต่คุณสามารถใช้ |.

— user3576467
แหล่งที่มา

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

ฉันคิดว่ามันง่ายที่จะสร้างภาพของเส้นแล้วแทรกลงในโค้ดเป็น "กฎ" โดยตั้งค่าความกว้างและ / หรือความสูงตามต้องการ ทั้งหมดนี้เป็นรูปภาพแนวนอน แต่ไม่มีอะไรหยุดฉัน (หรือคุณ) จากการใช้รูปภาพ "กฎแนวตั้ง"

สิ่งนี้ยอดเยี่ยมด้วยเหตุผลหลายประการ คุณสามารถใช้เส้นสีหรือรูปแบบต่างๆเป็น "กฎ" ได้อย่างง่ายดายและเนื่องจากจะไม่มีข้อความแม้ว่าคุณจะใช้วิธี "ปกติ" โดยใช้ hr ใน HTML แต่ก็ไม่ควรส่งผลกระทบต่อ SEO หรือสิ่งอื่น ๆ เช่น ที่. และไฟล์ภาพจะ / ควรมีขนาดเล็กมาก (มากที่สุด 1 หรือ 2KB)

— ปีเตอร์เจย์
แหล่งที่มา

คุณควรใส่โค้ดตัวอย่างเพื่อสาธิตเทคนิคที่คุณกำลังแนะนำ

— Adam Katz

0

คำตอบที่ซับซ้อนเกินไปมากเกินไป เพียงสร้างแท็ก TableData ที่ครอบคลุมจำนวนแถวที่คุณต้องการโดยใช้ rowspan จากนั้นใช้เส้นขอบด้านขวาสำหรับแถบจริง

ตัวอย่าง:

<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

— Kevin Andrew Fogg
แหล่งที่มา

0

วันนี้เป็นไปได้ด้วย CSS3

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

— candlejack
แหล่งที่มา

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>

ขยายข้อมูลโค้ด

— abe312
แหล่งที่มา

0

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

ทำได้อย่างง่ายดายโดยใช้ div เช่นนี้

— Choxmi
แหล่งที่มา

-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>` FITTINGในกระบวนทัศน์เดิม
แต่ยังไม่มี:

คำตอบมากมายในที่นี้ชี้ให้เห็นว่าตัวแบ่งแนวตั้งไม่เหมาะกับกระบวนทัศน์ / วิธีการดั้งเดิมของ HTML ... ซึ่งผิดอย่างสิ้นเชิง นอกจากนี้คำตอบยังขัดแย้งกับตัวเองมาก

ผู้คนเดียวกันอาจจะเรียกคลาส CSS ของพวกเขาชัดเจน "clearfix" - มีอะไรที่จะแก้ไขปัญหาเกี่ยวกับการลอยคุณเป็นเพียงการล้างมัน ... แม้จะมีองค์ประกอบใน HTML3 <clear>คือ: น่าเศร้าที่สิ่งนี้และการลอยตัวเป็นหนึ่งในความเข้าใจผิดทั่วไปไม่กี่อย่าง

อย่างไรก็ตาม. "กลับมาแล้ว" ใน "วัยเดิม HTML" มีความคิดเกี่ยวกับบางสิ่งบางอย่างที่ไม่เหมือนใครinline-block, มีเพียงblocks, และinlinestables

สุดท้ายคือสาเหตุที่<vr>ไม่มีอยู่จริง
ย้อนกลับไปมีการสันนิษฐานว่า:
หากคุณต้องการแบ่งบางสิ่งในแนวตั้งและ / หรือสร้างบล็อกเพิ่มเติมจากซ้ายไปขวา =>
=> คุณกำลังสร้าง / ต้องการสร้างคอลัมน์ =>
=> ซึ่งหมายความว่าคุณกำลังสร้างตาราง =>
= > ตารางมีเส้นขอบตามธรรมชาติระหว่างเซลล์ => ไม่มีเหตุผลที่จะสร้างไฟล์<vr>

วิธีนี้ยังใช้ได้จริง แต่เมื่อเวลาผ่านไปไวยากรณ์ที่สร้างขึ้นสำหรับตารางไม่เหมาะสำหรับทุกกรณีรวมถึงรูปแบบเริ่มต้น

อีกประการหนึ่งอาจจะต่อมาสันนิษฐานได้ว่าถ้าคุณไม่ได้สร้างตารางคุณอาจจะลอยองค์ประกอบของบล็อก นั่นหมายความว่าพวกเขากำลังรวมตัวกันและอีกครั้งคุณสามารถกำหนดเส้นขอบได้และในสมัยนั้นอาจใช้:first-childตัวเลือกที่ฉันแนะนำไว้ข้างต้น ...

— jave.web
แหล่งที่มา

มี vr (กฎแนวตั้ง) ใน html หรือไม่?

องค์ประกอบที่กำหนดเอง HTML5 (หรือ CSS แท้)

1. จาวาสคริปต์

2. css

3. สร้างอินสแตนซ์

การใช้

ไม่อยากยุ่งกับจาวาสคริปต์?

CSS

เรื่องราวเกี่ยวกับ<vr> FITTINGในกระบวนทัศน์เดิมแต่ยังไม่มี:

เรื่องราวเกี่ยวกับ`<vr>` FITTINGในกระบวนทัศน์เดิม
แต่ยังไม่มี: