वर्टिकल बार i.e. "|" शैली कैसे बनाएं?

Question

मैं वर्टिकल बार को कैसे बना सकता हूं i.e. "|"? मुझे "|" की चौड़ाई और ऊंचाई को बदलने की जरूरत है।

यही वह है जो मैं करने की कोशिश कर रहा हूं।

<a href="link1"> Link 1 </a> | <a href="link2"> Link 2 </a> 

Answer 1

एक तत्व में यह रखो, और शैली तत्व:

<span class="bar">|</span> 

अपने शैली पत्रक में, उदाहरण के लिए:

.bar { font-size: 20px; } 

Answer 2

आप कर सकते हैं आसानी से सीएसएस के साथ वास्तव में शैली अलग-अलग पात्रों, जब तक कि आपके तत्व में केवल चरित्र है। यदि यह एक टेक्स्टरेरा में है तो आपको कोई उम्मीद नहीं है। यदि ऐसा नहीं है, तो आपको उम्मीद है: जब भी आप जिस पाठ को शैली में रखना चाहते हैं उसमें आपको <span class="specialBar">...</span> टैग के साथ मैन्युअल रूप से इसे जोड़ना होगा।

आप एक और यूनिकोड लंबवत-बार चरित्र का भी उपयोग कर सकते हैं जो अधिक है आपकी पसंद के हिसाब से।

---

संपादित, के जवाब में:

"मैं मूल रूप से लिंक के बीच एक seprator चाहता था मैं गलत दिशा में जा रहा हूँ - मूल पोस्टर।?" आप

आदर्श रूप में स्पैन का उपयोग करेगा, जिसे आप एक पतली लंबवत रेखा का अनुकरण करने के लिए सीएसएस के साथ आकार दे सकते हैं:

अनुकरण करने-साथ एक अवधि तकनीक - (live demo):

.linkSeparator { 
    display:inline-block; 
    margin-bottom:-1em; /*value should be (height-1em)/2*/ 
    height:3em; width:0.25em; 
    background-color:grey; 
    margin-left:0.5em; margin-right:0.5em; 
}​ 

link1<span class="linkSeparator"></span>link2<span class="linkSeparator">... 

छवियों तकनीक:

तुम भी छवियों इस्तेमाल कर सकते हैं (कम सुंदर, विस्तार में जाने नहीं होगा)।

भाई चयनकर्ता तकनीक - (live demo):

तुम भी सभी लिंक जो पहले नहीं कर रहे हैं पर border-left सेट कर सकते हैं। CSS2 adjacency selectors पर डब्ल्यू 3 सी स्पेक के मुताबिक, "E + F किसी भाई तत्व ई से पहले किसी भी एफ तत्व से मेल खाता है।" इसलिए:

.separatedLinks a+a { 
    border-left: 2px solid black; 
} 

<??? class="separatedLinks"> 
    <a href="...">link1</a> 
    <a href="...">link2</a> 
    <a href="...">link3</a> 
</???> 

आप अधिक उदाहरण खोजने के लिए सक्षम हो सकता है यह गूगल पर मारा: http://meyerweb.com/eric/articles/webrev/200007a.html

Answer 3

| एक चरित्र है, और सु ch, किसी भी स्टाइलिंग लेता है जिसे आप टेक्स्ट पर लागू कर सकते हैं। मुझे इंप्रेशन मिलता है, कि आप बॉक्स सीमा बनाने के लिए | का उपयोग करने का प्रयास कर रहे हैं। यदि ऐसा है, तो आप अक्षरों का उपयोग करने की कोशिश करने वाली सीमा रखने के लिए ब्लॉक स्तर तत्व को स्टाइल करने से काफी बेहतर हैं।

Answer 4

आपको एक विभाजक के रूप में पाइप (|) का उपयोग नहीं करना चाहिए, इसके बजाय सीएसएस का उपयोग करें।

, कहो इस तरह एंकर breadcrumbs करने के लिए आईडी बराबर के साथ, एक div में थे:

<div id="breadcrumbs"> 
    <a href="#">One</a> 
    <a href="#">Two</a> 
    <a href="#">Three</a> 
</div>​ 

फिर आप इस तरह एक जोड़े सीएसएस नियमों के साथ उन दोनों के बीच विभाजक जोड़ सकता है,:

#breadcrumbs a { 
    padding: 0.5em; 
    border-right: 5px solid green; 
} 

#breadcrumbs a:last-child { 
    border-right: none; 
}​ 

आप border-right: 5px solid green नियम के साथ विभाजक के आकार, शैली और रंग को बदल सकते हैं। कार्रवाई में Here's an example (अद्यतन)। सीमा स्टाइल पर Here's some documentation।

:last-child के साथ दूसरा नियम अंतिम तत्व के बाद एक अतिरिक्त विभाजक को रोकता है।

विभाजक की ऊंचाई को बदलने के लिए, आप पहले नियम पर padding बदल देंगे।

लोकप्रिय मांग करके, एक सूची संस्करण:

आप एक सूची में लिंक डाल दिया:

<ul id="breadcrumb-list"> 
    <li><a href="#">One</a></li> 
    <li><a href="#">Two</a></li> 
    <li><a href="#">Three</a></li> 
</ul>​ 

और इस तरह के नियमों का उपयोग करें:

ul#breadcrumb-list li { 
    display: inline-block; 
    margin: 0; 
    padding: 1em 1em 0 1em; 
    border-right: 1px dotted blue; 
} 

ul#breadcrumb-list li:last-child { 
    border-right: none; 
} 

आप उपयोग कर सकते हैं बेहतर semantics के लिए लिंक की अपनी सूची मार्कअप करने के लिए ul। आपको inline-block को एक पंक्ति पर रखने के लिए li डिफ़ॉल्ट रूप से ब्लॉक स्तर तत्व है।

मैंने पैडिंग और सीमा नियमों को बदलकर एक अलग शैली भी दिखायी है जिसे आप प्राप्त कर सकते हैं।