133

मुझे पता है कि html में एक घंटा (क्षैतिज नियम) है, लेकिन मुझे नहीं लगता कि कोई vr (वर्टिकल नियम) है। क्या मैं गलत हूं और यदि नहीं, तो एक ऊर्ध्वाधर नियम क्यों नहीं है?

html

— Xaisoft
स्रोत

17

यह एक मृत प्रश्न है, लेकिन अब CSS3 की कल्पना के साथ, आप एक ऊर्ध्वाधर, क्षैतिज नियम बनाने के लिए ट्रांसफॉर्म: रोटेट (90 डिग्री) का उपयोग कर सकते हैं।

— जूल्स

3

यदि आप फ्लेक्सबॉक्स का उपयोग पंक्तियों के रूप में करते हैं (प्रदर्शन: फ्लेक्स; फ्लेक्स-दिशा: पंक्ति;) hrतत्व स्वचालित रूप से ऊर्ध्वाधर हो जाएंगे। आपको बस इसे सेट करने की आवश्यकता है height(उदाहरण के लिए ऊंचाई: 80%;)।

— रॉड्रिगो

156

नहीं, कोई वर्टिकल रूल नहीं है।

एक होने का तार्किक अर्थ नहीं है। HTML को क्रमिक रूप से पार्स किया गया है, जिसका अर्थ है कि आपने अपना HTML कोड ऊपर से नीचे की ओर छोड़ा है, दाएं से बाएं कैसे आप इसे ऊपर से नीचे की ओर दिखाना चाहते हैं, बाएं से दाएं (आम तौर पर)

एक vr टैग उस प्रतिमान का पालन नहीं करता है।

हालांकि, सीएसएस का उपयोग करना आसान है। उदाहरण के लिए:

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

ध्यान दें कि आपको ऊंचाई निर्दिष्ट करने या कंटेनर को सामग्री से भरने की आवश्यकता है।

— एंडी बेयर्ड
स्रोत

4

टेबल्स आइटम को लंबवत रूप से अलग कर सकते हैं, इसलिए आप जो कह रहे हैं वह वास्तविक कारण नहीं है कोई वीआर टैग नहीं है।

— CiscoIPPhone

6

यही कारण है कि तालिकाओं को HTML युक्ति में नहीं जोड़ा गया था। सारणीबद्ध डेटा प्रदर्शित करने के लिए तालिकाएँ हैं। लगभग किसी भी HTML तत्व का उपयोग लंबवत रूप से अलग करने के लिए किया जा सकता है (आपके द्वारा प्रदर्शित कुछ भी: ब्लॉक और फ्लोट: किसी भी ऊंचाई सेट के साथ छोड़ दिया गया)

— एंडी बेयर्ड

19

ERF। मैं यह कहने की कोशिश कर रहा था कि अगर चीजें पहले से ही लंबवत रूप से अलग हो सकती हैं, तो एक vr को जोड़ना कैसे HTMLs प्रतिमान का पालन नहीं करेगा?

— सिस्कोपफोन 9

4

@ सिस्कोपफोन - ऊर्ध्वाधर पृथक्करण के लिए एक क्षैतिज नियम की आवश्यकता होगी। पार्श्व पृथक्करण के लिए एक ऊर्ध्वाधर नियम की आवश्यकता होगी। एर्गो, एंडी बेयर्ड सही है, मुझे लगता है।

— जोशुआ

3

मैं सहमत नहीं हो सकता कि यह प्रतिमान का पालन नहीं करता है। जैसा कि आपने कहा कि इसे क्रमिक रूप से, ऊपर से नीचे, बाएं से दाएं पर रखा गया है। आप ऐसी सामग्री को विभाजित कर सकते हैं जो एक ऊर्ध्वाधर नियम के साथ बाएं से दाएं जाती है। HTML के पहले के दिनों में मैं मानता हूं कि यह तार्किक अर्थ नहीं होगा। अब एक वर्टिकल रूल html में उपयोग की जाने वाली एक टोटल नियम है, भले ही इसके लिए कोई शब्दशः सही टैग न हो। केवल मेरे दो सेंट्स।

— हेंडेका

37

आप इस तरह एक ऊर्ध्वाधर नियम बना सकते हैं: <hr style="width: 1px; height: 20px; display: inline-block;">

— मैट
स्रोत

16

जैसा कि दूसरों ने बताया है, एक ऊर्ध्वाधर नियम की अवधारणा HTML दस्तावेजों की संरचना और प्रस्तुति के पीछे मूल विचारों के साथ फिट नहीं होती है। हालांकि, इन दिनों (विशेष रूप से वेब-ऐप के प्रसार के साथ) कुछ परिदृश्य हैं जहां यह वास्तव में उपयोगी होगा।

उदाहरण के लिए, स्क्रीन के शीर्ष पर तय किए गए एक क्षैतिज नेविगेशन मेनू पर विचार करें, अधिकांश विंडो वाले GUI अनुप्रयोगों में मेनू-बार के समान। आपके पास बाईं ओर से दाईं ओर कई शीर्ष-स्तरीय मेनू आइटम व्यवस्थित हैं जो क्लिक करने पर ड्रॉप-डाउन मेनू खोलते हैं। वर्षों पहले, यह एकल-पंक्ति तालिका के साथ बनाने के लिए सामान्य अभ्यास था, लेकिन यह बुरा HTML है और यह व्यापक रूप से मान्यता है कि जाने का सही तरीका भारी अनुकूलित सीएसएस के साथ एक सूची होगी।

अब, कहते हैं कि आप इसी तरह की वस्तुओं को समूह बनाना चाहते हैं, लेकिन समूहों के बीच एक ऊर्ध्वाधर विभाजक जोड़कर कुछ ऐसा हासिल कर सकते हैं:

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

<hr style="width: 1px; height: 100%; ..." />कार्यों का उपयोग करना , लेकिन शब्दार्थ को गलत माना जा सकता है क्योंकि आप बदल रहे हैं कि वह तत्व वास्तव में किस लिए है। इसके अलावा, आप इसका उपयोग कुछ ऐसे तत्वों में नहीं कर सकते हैं जहाँ HTML DTD केवल इनलाइन-स्तरीय तत्वों (जैसे एक तत्व के भीतर ) की अनुमति देता है ।

एक बेहतर विकल्प होगा , हालांकि सभी ब्राउज़र display: inline-block;सीएसएस संपत्ति का समर्थन नहीं करते हैं, इसलिए केवल वास्तविक इनलाइन-स्तर विकल्प एक छवि का उपयोग करना है:

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

इसमें टेक्स्ट-ओनली ब्राउजर्स (लाइनेक्स की तरह) के साथ संगत होने का अतिरिक्त फायदा है क्योंकि चित्र के बजाय पाइप कैरेक्टर प्रदर्शित होता है। (यह अभी भी मुझे गुस्सा दिलाता है कि एम $ IE गलत तरीके से टूलटिप के रूप में Alt पाठ का उपयोग करता है; यही शीर्षक विशेषता के लिए है!)

— 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
स्रोत

ये एक अच्छा बिंदु है। हालाँकि, इसका अर्थ है पृष्ठ को एक अपरंपरागत तरीके से प्रस्तुत करना क्योंकि आपको डोम में अन्य सभी तत्वों के साथ प्रतिस्पर्धा करनी है। क्या आपने कभी गौर किया है कि कभी-कभी ब्राउज़रों के बीच मतभेद होते हैं? ;) ~ फिर भी, बहुत अच्छी बात ।

— jcolebrand

7

डिस्प्ले के अंदर एक <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>

— Nixinova
स्रोत

3

वहाँ नहीं है, यह कहाँ जाएगा?

यदि आप ऐसा कुछ चाहते हैं, तो किसी तत्व पर बॉर्डर-राइट लगाने के लिए CSS का उपयोग करें।

— चाड बर्च
स्रोत

2

HTML में कंटेंट लेआउट की टाइपोग्राफिक प्रकृति के कारण कोई ऊर्ध्वाधर स्थिति नहीं है। वर्टिकल रूल सिर्फ इसके शब्दार्थ में फिट नहीं है।

— 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 px करें

— बोल्टकॉक
स्रोत

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

इसे इस्तेमाल करे।

आप " div " पर ऊंचाई और चौड़ाई सेट कर सकते हैं , जैसे " hr " के लिए गुंजाइश ।

" 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 /> टैग पूरी तरह से उपयोगी होगा। इसका एक कारण यह नहीं है क्योंकि एक दशक पहले HTML के संदर्भ में "एक होने के लिए तार्किक अर्थ नहीं है"।

— joemaddalone
स्रोत

1

अधिकांश डेस्कटॉप क्लाइंट के लिए HTML ईमेल में उपयोग के लिए आपको तालिकाओं का उपयोग करना होगा। इस स्थिति में, आप <hr>आवश्यक (लेकिन सरल) इनलाइन स्टाइल के साथ टैग का उपयोग कर सकते हैं , जैसे:

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

बेशक कि CSS के साथ स्टाइल करना अधिक लचीला है, लेकिन GMail और इसी तरह इनलाइन के अलावा किसी भी CSS स्टाइल का उपयोग करने की अनुमति नहीं है ...

— desko
स्रोत

1

आप एक ऊर्ध्वाधर रेखा का अनुकरण करने के लिए सीएसएस का उपयोग कर सकते हैं, और div पर कक्षा का उपयोग कर सकते हैं

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

— येना विलाफेंस
स्रोत

1

आप इसे बहुत आसानी से कर सकते हैं

hr{
 transform: rotate(90deg);
}

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

स्निपेट का विस्तार करें

घंटे की ऊंचाई और चौड़ाई के बारे में सावधान रहें

— नीतीश
स्रोत

1

HTML5 कस्टम तत्व (या शुद्ध CSS)

1. जावास्क्रिप्ट

अपना तत्व पंजीकृत करें।

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

* -सभी कस्टम तत्वों में अनिवार्य है।

2. सी.एस.एस.

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

जावास्क्रिप्ट के साथ गड़बड़ नहीं करना चाहते हैं?

बस इस सीएसएस वर्ग को अपने निर्दिष्ट तत्व पर लागू करें।

सीएसएस

.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

मुझे एक पंक्ति की एक छवि बनाना आसान लगता है , और फिर उसे "नियम" के रूप में कोड में सम्मिलित करना चाहिए, जिससे चौड़ाई और / या ऊंचाई निर्धारित की जा सके। ये सभी क्षैतिज-नियम छवियां हैं, लेकिन "वर्टिकल-रूल" छवि का उपयोग करने से मुझे (या आपको) रोकना कुछ भी नहीं है।

यह कई कारणों से शांत है; आप "नियम" के रूप में आसानी से विभिन्न लाइनों, रंगों, या पैटर्न का उपयोग कर सकते हैं, और चूंकि उनके पास कोई पाठ नहीं होगा, भले ही आपने इसे HTML में एचआर का उपयोग करके "सामान्य" तरीके से किया हो, यह एसईओ या अन्य सामान को प्रभावित नहीं करना चाहिए। उस। और छवि फ़ाइल बहुत छोटी (1 या 2KB सबसे अधिक) होनी चाहिए।

— पीटर जे
स्रोत

आपको जिस तकनीक का सुझाव दे रहे हैं उसे प्रदर्शित करने के लिए आपको नमूना कोड शामिल करना चाहिए।

— एडम काट्ज़

0

बहुत अधिक जटिल जवाब। बस एक 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" पहले की तरह ही लाइनों को चलाता है। ताकि दोनों के बीच उचित रिक्ति हो।

इस तकनीक ने मुझे एचटीएमएल 5 में अपने समय के बजाय अच्छी तरह से सेवा दी है।

— केविन एंड्रयू फॉग
स्रोत

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>

इस तरह से एक डिव का उपयोग करके आसानी से किया जा सकता है

— Choxmi
स्रोत

-1

वहाँ नही है।

क्यों? शायद इसलिए क्योंकि दो कॉलम वाली एक टेबल होगी।

— OscarRyz
स्रोत

23

क्योंकि लोगों को नहीं लगता है कि इसके लिए तालिकाओं का उपयोग किया जाना चाहिए (मैंने डाउनवोट नहीं किया)।

— erikkallen

-2

नहीं वहाँ नहीं है। और मैं आपको एक छोटी सी कहानी बताऊंगा कि यह क्यों नहीं है। लेकिन पहले, त्वरित समाधान:

a) मूल तत्वों span/ के लिए CSS वर्ग का उपयोग करें 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/

ख):first-child यदि आप एक सामान्य डिवाइडर को सिबलिंग / निगारबेल तत्वों के बीच लगाना चाहते हैं, तो केवल एक तरफ की सीमा और संभवतः CSS चयनकर्ता का उपयोग करें ।

मूल प्रतिमान में `<vr>` FITTING के बारे में कहानी ,
लेकिन अभी भी वहाँ नहीं है:

यहाँ कई उत्तर बताते हैं, कि ऊर्ध्वाधर विभक्त मूल HTML प्रतिमान / दृष्टिकोण के अनुकूल नहीं है ... जो पूरी तरह से गलत है। इसके अलावा जवाब अपने आप में बहुत विरोधाभास है।

वही लोग शायद अपने स्पष्ट सीएसएस वर्ग को "क्लीयरफिक्स" कह रहे हैं - फ़्लोटिंग के बारे में तय करने के लिए कुछ भी नहीं है, आप इसे साफ कर रहे हैं ... एचटीएमएल 3 में एक तत्व भी था <clear>:। अफसोस की बात है, यह और तैरने की मंजूरी कुछ सामान्य गलतफहमियों में से एक है।

वैसे भी। "उस समय" "मूल HTML उम्र" में, वहाँ की तरह कुछ के बारे में कोई विचार था inline-blockवहाँ, बस थे blocks, inlinesऔर tables।

अंतिम वास्तव में यही कारण <vr>है कि अस्तित्व क्यों नहीं है।
पीछे तो यह मान लिया गया था कि:
यदि आप किसी चीज को ऊर्ध्वाधर रूप से विभाजित करना चाहते हैं और / या बाएं से दाएं और अधिक ब्लॉक बनाते हैं
=>> आप बना रहे हैं / कॉलम बनाना चाहते हैं =>
=> जिसका अर्थ है कि आप एक टेबल बना रहे हैं =>
= = > टेबल की कोशिकाओं के बीच प्राकृतिक सीमाएँ होती हैं => बनाने का कोई कारण नहीं<vr>

यह दृष्टिकोण वास्तव में अभी भी मान्य है, लेकिन जैसा कि समय दिखाया गया है, तालिकाओं के लिए बनाया गया वाक्यविन्यास हर मामले के साथ-साथ डिफ़ॉल्ट शैलियों के लिए उपयुक्त नहीं है।

एक और, शायद बाद में, धारणा यह थी कि यदि आप तालिका नहीं बना रहे हैं, तो आप संभवतः ब्लॉक तत्व तैर रहे हैं । इसका मतलब है कि वे एक साथ चिपके हुए हैं , और फिर से, आप एक सीमा निर्धारित कर सकते हैं , और उन दिनों शायद :first-childऊपर बताए गए चयनकर्ता का उपयोग भी कर सकते हैं ...

— jave.web
स्रोत

Html में vr (वर्टिकल रूल) है?

HTML5 कस्टम तत्व (या शुद्ध CSS)

1. जावास्क्रिप्ट

2. सी.एस.एस.

3. तात्कालिक

प्रयोग

जावास्क्रिप्ट के साथ गड़बड़ नहीं करना चाहते हैं?

सीएसएस

मूल प्रतिमान में <vr> FITTING के बारे में कहानी , लेकिन अभी भी वहाँ नहीं है:

मूल प्रतिमान में `<vr>` FITTING के बारे में कहानी ,
लेकिन अभी भी वहाँ नहीं है: