HTML में वर्टिकल लाइन कैसे बनाते है

Question

आप HTML का उपयोग करके एक ऊर्ध्वाधर रेखा कैसे बनाते हैं?

Comments

W3 नहीं होशियार हो सकता है और एक युक्ति जोड़ने के लिए<vr>

— OverCoder

Answer 1

एक रखो <div>मार्कअप जहां लाइन के बगल में प्रदर्शित करना चाहते हैं, और यह शैली के लिए उपयोग सीएसएस चारों ओर:

.verticalLine {
  border-left: thick solid #ff0000;
}

<div class="verticalLine">
  some other content
</div>

Comments

सामग्री के साथ संयोजन शैली कई के लिए वर्जित नहीं है। <div style = "border-left: thin solid # 0000ff"> मेरे पास कहने के लिए कुछ नहीं है और मैं इसे कह रहा हूं </ div>

— ctpenrose

@ctpenrose यह वास्तव में वर्जित नहीं है, लेकिन उन्हें अलग करना आसान है, क्योंकि यदि आवश्यक हो तो आप आसानी से एक जगह समायोजित कर सकते हैं। इसके अलावा इसे अलग सीएसएस फ़ाइल में रखना प्रदर्शन के लिए बेहतर है क्योंकि इसे ब्राउज़र द्वारा कैश किया जा सकता है और हर बार जब आप प्रदान किए गए HTML का अनुरोध करते हैं तो आप तार पर कम बाइट्स संचारित करते हैं।

— क्रिश वैन डेर मस्त

Answer 2

आप ऊर्ध्वाधर लाइनों को बनाने के लिए क्षैतिज नियम टैग का उपयोग कर सकते हैं।

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

न्यूनतम चौड़ाई और बड़े आकार का उपयोग करके, क्षैतिज नियम एक ऊर्ध्वाधर हो जाता है।

Comments

ब्रावो, सर। वह मस्त चाल है। अभी भी इसे सेट करने की आवश्यकता है display:inline-blockअन्यथा यह अन्य इनलाइन तत्वों के बगल में नहीं बैठेगा।

— एलेक्स डब्ल्यू

मुझे नहीं लगता कि यह फ़ायरफ़ॉक्स में काम करता है, हालांकि। लाइन वहाँ है, लेकिन ऐसा प्रतीत नहीं होता है ...

— Edd

इस कोड के लिए धन्यवाद। यहाँ इस jsfiddle.net/ccatto/c8RQc

— Catto

Giulio क्योंकि यह वास्तव में स्क्रीन को दो कॉलम में विभाजित नहीं करता है। फिर से आपको div की तरह वांछित परिणाम के लिए कुछ css स्टाफ का उपयोग करने की आवश्यकता है।

— इस्माइल साहिन

मुझे यह बेहतर लगता है क्योंकि यह एक छिपे हुए div होने की विचित्रता से बचता है, जिसमें इसकी केवल एक तरफ दृश्य सीमा होती है। दी, यह वह तरीका नहीं है जो आप सामान्य रूप से hr का उपयोग करते हैं, लेकिन यह अभी भी मेरे लिए अधिक मायने रखता है।

— लेविनिन्जा

Answer 3

आप एक खाली का उपयोग कर सकते हैं जो <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>

यदि आप 3 डी लुक चाहते हैं तो बॉर्डर को स्टाइल करें:

    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>

Comments

+1 यह समाधान अच्छा है क्योंकि यह विभिन्न आवश्यकताओं के लिए आसानी से अनुकूलन योग्य है

— फैनकुश

Answer 4

आप HTML क्षैतिज रेखा का उपयोग करके एक ऊर्ध्वाधर रेखा भी बना सकते हैं <hr />

html, body{height: 100%;}

hr.vertical {
  width: 0px;
  height: 100%;
  /* or height in PX */
}

<hr class="vertical" />

Comments

मानक के समान लाइन स्टाइल पाने के लिए शानदार ट्रिक <hr>। : शायद यह भी (उदाहरण के सामग्री के पक्ष में नाव के लिए अतिरिक्त स्टाइल की जरूरत है float:left;)

— भय

यह "ऊर्ध्वाधर" नियम अभी भी (पाठ) तत्वों को सामान्य क्षैतिज नियम के रूप में लंबवत रूप से अलग करता है।

— क्वर्टी

Answer 5

<hr>तत्व के बराबर कोई ऊर्ध्वाधर नहीं है । हालाँकि, एक दृष्टिकोण जिसे आप आज़माना चाहते हैं वह यह है कि आप जो कुछ भी अलग कर रहे हैं उसके बाएं या दाएं एक साधारण बॉर्डर का उपयोग करें:

#your_col {
  border-left: 1px solid black;
}

<div id="your_col">
  Your content here
</div>

Answer 6

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

* ऊपर नोट देखें।

Comments

सीमाओं के बारे में दुखी, लेकिन यह वास्तव में कुछ अन्य स्थानों में वास्तव में उपयोगी दिखता है।

— स्मार

यह सभी डिव साइज़ को नहीं भरता है कि कैसे ठीक करें?

— ओटवियो बैरेटो

@ OtávioBarreto आपको टिप्पणी की गई displayसंपत्ति के साथ फ़ाइड करने की आवश्यकता हो सकती है । इसे inlineया तो सेट करें या inline-block। ऊपर दिए गए नोट्स और उदाहरण url देखें।

— क्वर्टी

Answer 7

एक अन्य विकल्प 1-पिक्सेल छवि का उपयोग करना है, और ऊँचाई सेट करना है - यह विकल्प आपको इसे फ्लोट करने की अनुमति देगा जहां आपको होना चाहिए।

हालांकि सबसे सुरुचिपूर्ण समाधान नहीं है।

Comments

इस विधि के साथ कुछ भी गलत नहीं है, वे इसे jquery वेबसाइट पर उपयोग करते हैं

— Stephenmurdoch

Answer 8

आप किसी भी HTML तत्व के साथ केवल ऊंचाई / चौड़ाई का उपयोग करके एक ऊर्ध्वाधर रेखा खींच सकते हैं।

#verticle-line {
  width: 1px;
  min-height: 400px;
  background: red;
}

<div id="verticle-line"></div>

Answer 9

HTML में वर्टिकल लाइन बनाने के लिए कोई टैग नहीं है।

1. विधि: आप एक रेखा चित्र लोड करते हैं। फिर आप इसकी शैली सेट करें"height: 100px ; width: 2px"

2. विधि: आप <td>टैग का उपयोग कर सकते हैं<td style="border-left: 1px solid red; padding: 5px;"> X </td>

Answer 10

आप hr (क्षैतिज रेखा) टैग का उपयोग कर सकते हैं और इसे 90 डिग्री से नीचे css के साथ घुमा सकते हैं

hr {   
    transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}

http://jsfiddle.net/haykaghabekyan/0c969bm6/1/

Comments

यह किसी भी पाठ या तत्वों को तोड़ देगा।

— क्वर्टी

Answer 11

मैंने सुझाए गए "hr" कोड के संयोजन का उपयोग किया, और यहां मेरा कोड कैसा दिखता है:

<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>

मैंने इसे लगाने के लिए बस "बाएँ" पिक्सेल मान का मूल्य बदल दिया। (मैंने अपने वेबपेज पर कंटेंट को लाइन-अप करने के लिए वर्टिकल लाइन का उपयोग किया, और फिर मैंने इसे हटा दिया।)

Answer 12

एक div के अंदर केंद्रित एक ऊर्ध्वाधर रेखा बनाने के लिए मुझे लगता है कि आप इस कोड का उपयोग कर सकते हैं। मुझे लगता है कि 'कंटेनर' 100% चौड़ाई वाला हो सकता है।

div.container {
  width: 400px;
}

div.vertical-line {
  border-left: 1px solid #808080;
  height: 350px;
  margin-left: auto;
  margin-right: auto;
  width: 1px;
}

<div class="container">
  <div class="vertical-line">&nbsp;</div>
</div>

Comments

सर्वश्रेष्ठ उत्तर, अन्य सभी बाईं या दाईं ओर अटक गए हैं। धन्यवाद!

— अब्देलहदी लाहौलू

Answer 13

& # 124 का उपयोग क्यों न करें, जो html विशेष वर्ण है |

Comments

क्योंकि यह एक ऊर्ध्वाधर रेखा नहीं है

— ओवरकोडर

Answer 14

यदि आपका लक्ष्य किसी साइड-बाय-चाइल्ड एलिमेंट्स (कॉलम एलिमेंट्स) को अलग करने के लिए कंटेनर में वर्टिकल लाइन्स डालना है, तो आप कंटेनर को इस तरह से स्टाइल करने पर विचार कर सकते हैं:

.container > *:not(:first-child) {
  border-left: solid gray 2px;
}

यह 2 वें बच्चे से शुरू होने वाले सभी बाल तत्वों के लिए एक बाईं सीमा जोड़ता है। दूसरे शब्दों में, आपको आसन्न बच्चों के बीच ऊर्ध्वाधर सीमाएं मिलती हैं।

• >एक बच्चा चयनकर्ता है। यह तत्व के किसी भी बच्चे से मेल खाता है जो बाईं ओर निर्दिष्ट है।
• *एक सार्वभौमिक चयनकर्ता है। यह किसी भी प्रकार के एक तत्व से मेल खाता है।
• :not(:first-child) इसका अर्थ है कि यह अपने माता-पिता की पहली संतान नहीं है।

ब्राउज़र समर्थन: * *: पहला बच्चा और : नहीं ()

मुझे लगता है कि यह एक साधारण .child-except-first {border-left: ...}नियम से बेहतर है , क्योंकि यह कंटेनर के नियमों से आने वाली रेखाओं के बारे में अधिक समझ में आता है, न कि विभिन्न बाल तत्वों के नियमों से।

चाहे यह एक मेशिफ्ट वर्टिकल रूल एलिमेंट का उपयोग करने से बेहतर है (एक क्षैतिज नियम आदि को स्टाइल करके) आपके उपयोग के मामले पर निर्भर करेगा, लेकिन यह कम से कम एक विकल्प है।

Answer 15

एक और दृष्टिकोण संभव है: एसवीजी का उपयोग करना ।

जैसे:

<svg height="210" width="500">
    <line x1="0" y1="0" x2="0" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
      Sorry, your browser does not support inline SVG.
</svg>

पेशेवरों:

• आपके पास किसी भी लंबाई और अभिविन्यास की रेखा हो सकती है।
• आप चौड़ाई, रंग आसानी से निर्दिष्ट कर सकते हैं

विपक्ष:

• एसवीजी अब अधिकांश आधुनिक ब्राउज़रों पर समर्थित हैं। लेकिन कुछ पुराने ब्राउज़र (जैसे IE 8 और पुराने) इसका समर्थन नहीं करते हैं।

Answer 16

दायीं ओर खड़ी रेखा

    <div style="width:50%">
        <div style="border-right:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>
  

कार्यक्षेत्र रेखा को विभाज्य में छोड़ दिया

    <div style="width:50%">
        <div style="border-left:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>
  

Answer 17

एक वर्टिकल लाइन जोड़ने के लिए आपको एक घंटा स्टाइल करना होगा।

अब जब आप एक ऊर्ध्वाधर रेखा बनाते हैं तो यह पृष्ठ के मध्य में दिखाई देगा:

<hr style="width:0.5px;height:500px;"/>

अब इसे रखने के लिए जहाँ आप चाहते हैं आप इस कोड का उपयोग कर सकते हैं:

<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>

यह इसे बाईं ओर स्थिति देगा, आप इसे दाईं ओर स्थिति के लिए उलटा कर सकते हैं।

Answer 18

<hr>क्षैतिज रेखा के लिए एक टैग है। सीएसएस के साथ इसका उपयोग क्षैतिज रेखा बनाने के लिए भी किया जा सकता है:

.divider{
    margin-left: 5px;
    margin-right: 5px;
    height: 100px;
    width: 1px;
    background-color: red;
}

<hr class="divider">

चौड़ाई की संपत्ति लाइन की मोटाई निर्धारित करती है। ऊंचाई की संपत्ति लाइन की लंबाई निर्धारित करती है। पृष्ठभूमि-रंग की संपत्ति लाइन के रंग को निर्धारित करती है।

Answer 19

पिछले तत्व में जिसके बाद आप ऊर्ध्वाधर पंक्ति को लागू करना चाहते हैं, आप CSS सेट कर सकते हैं ...

border-right-width: thin;
border-right-color: black;
border-right-style: solid;

Answer 20

<hr>90 डिग्री घुमाएँ :

<hr style="width:100px; transform:rotate(90deg);">

Answer 21

इनलाइन शैली के लिए मैंने इस कोड का उपयोग किया:

<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />

और इसे सीधे केंद्र में तैनात किया।

Answer 22

मुझे एक इनलाइन वर्टिकल लाइन की आवश्यकता थी, इसलिए मैंने एक बटन को एक लाइन बनने में धोखा दिया।

<button type="button" class="v_line">l</button>

.v_line {
         width: 0px;
         padding: .5em .5px;
         background-color: black;
         margin: 0px; 4px;
        }

Answer 23

<div style="width:1px;background-color:#C0C0C0;"></div>

यह मेरे लिए बहुत अच्छा काम किया

Answer 24

मध्य उपयोग के लिए लंबवत रेखा बनाने के लिए:

position: absolute; 
left: 50%;

Comments

उन्होंने पूछा कि खड़ी लाइन कैसे बनाई जाती है, न कि बीच में खड़ी लाइन को कैसे बनाया जाए

— Bloodhound